文档章节

less的简单实用介绍

jywud
 jywud
发布于 2016/06/26 23:38
字数 459
阅读 29
收藏 2

 

less是css的预处理语言,作为 CSS 的一种扩展,不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法。

编译方式

1.使用koala编译

Koala 是一款由国人开发的开源预处理语言图形编译工具,目前已经支持less,sass,compass,coffeescript,很好用。下载地址 http://koala-app.com/index-zh.html

2.使用nodejs

在Node.js中安装LESS最简单的方式就是使用Node包管理工具npm来安装:

npm install -g less

如果你使用Mac或者Linux,可能需要使用管理员身份安装:

sudo npm install -g less

编译

lessc styles.less

 常用方式介绍

1.变量

变量命名以@开头,例如

@myColor: #5B83AD;

 #header { color: @myColor; }

编译为:

#header { color: #5B83AD; }

2.混合(mixin)

不带参数的方式,例如

.myColor{color: #666}

#header{

    width:100px;

    height:100px;

    .myColor

混合也可以带参数,例如

.myColor(@color){color: @color}

#header{

    width:100px;

    height:100px;

    .myColor(#346)

混合也可以定义默认参数值,例如

如果调用不传参数的话,#666为默认值

.myColor(@color: #666){color: @color}

#header{

    width:100px;

    height:100px;

    .myColor()

 

3.嵌套规则

我们之前经常见到ul li的css样式

ul{list-style:none}

ul li{    

    height:30px;

}

ul a{

    color:#222;

ul a:hover{

    color:#777;

}

用less嵌套的话这样写,很好理解,其中&表示上一层元素,就是a

ul{

    list-style:none;

    li{        

        color:#222;

        height:30px;

    }

    a{

         color:#222;

        &:hover{

            color:#777;

        }

    }

}

 

4.运算

数字可以加减乘除,例如

@myFont:14px;

#d1{

    font-size:8px+@myFont

}

结果为

#d1{

    font-size:22px

}

颜色也可以运算,要先转化为10进制。

 

5.匹配模式

类似于js的条件运算

.test(top,@w:100px){   

   height:@w;

.test(bottom,@w:200px){   

    height:@w;

#header{

    .test(top,120px); //匹配第一个.test

 

6.@arguments

所有的参数

.my(@w:100px,@s:#222,@xx:solid){

    border:@arguments;

}

#header{.my();}

7.避免编译

使用 ~'............'

 

 

 

© 著作权归作者所有

共有 人打赏支持
jywud
粉丝 2
博文 10
码字总数 11214
作品 0
南京
前端工程师
分布式集群管理软件--dister

dister dister的介绍 dister(Distribution Cluster)是一款轻量级高性能的分布式集群管理软件,实现了分布式软件架构中的常用核心组件,包括: 服务配置管理中心; 服务注册与发现; 服务健康检...

johng_cn
2017/09/21
407
0
Navicat Premium 中实用工具有哪些

数据库管理工具的种类有很多,其中,Navicat Premium非常的受广大的用户喜欢。因为,它为了改善用户的体验,特地提供了数种实用工具。而且其本身还支持单一程序同时连接到 SQLite、MariaDB、...

Navicat数据库管理工具
2016/06/27
12
0
php开源框架--CanPHP

CanPHP框架是一个简洁,实用,高效,遵循apache协议的php开源框架,以“简单、自由、包容”为理念,主要是为了简化和快速开发小型项目和开 源系统二次开发而诞生。它既可以完美的支持MVC模式...

单骑闯天下
2012/03/11
4.8K
4
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
537
6
10+ 方便实用的jQuery代码

由chenglin博客整理发表,原文链接:http://www.chenglin.name/web/js-web/405.html 这里将为大家介绍十几个方便实用的jquery代码,大多简单上手,欢迎大家交流 平滑滚动到页面顶部 我们以一...

Cleey
2014/02/17
327
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

7 个致命的 Linux 命令

导读 如果你是一个 Linux 新手,在好奇心的驱使下,可能会去尝试从各个渠道获得的命令。以下是 7 个致命的 Linux 命令,轻则使你的数据造成丢失,重则使你的系统造成瘫痪,所以,你应当竭力避...

问题终结者
今天
0
0
设计模式:工厂方法模式(工厂模式)

工厂方法模式才是真正的工厂模式,前面讲到的静态工厂模式实际上不能说是一种真正意义上的设计模式,只是一种变成习惯。 工厂方法的类图: 这里面涉及到四个种类: 1、抽象产品: Product 2、...

京一
今天
0
0
区块链和数据库,技术到底有何区别?

关于数据库和区块链,总会有很多的困惑。区块链其实是一种数据库,因为他是数字账本,并且在区块的数据结构上存储信息。数据库中存储信息的结构被称为表格。但是,区块链是数据库,数据库可不...

HiBlock
今天
0
0
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View......

罗培海
今天
0
0
Mac Docker安装流程

久仰Docker大名已久,于是今天趁着有空,尝试了一下Docker 先是从docker的官网上下载下来mac版本的docker安装包,安装很简易,就直接拖图标就好了。 https://www.docker.com/products/docker...

writeademo
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部