Less的简单使用教学-入门级

Less --- 一种动态样式语言。

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数。LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

一、变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

1、定义一个变量在less中使用

2、编译后的CSS样式结果：

结论：@color 等价于 #ffffff，在编译过程中变量会被替代了，如果是颜色值会被直接转为十六进制的单位，并为了浏览器兼容性，会自动补全到6位，不会缩写。

二、混合

Less的混合可分为

（1）定义通用属性集为class，在另外一个class里调用这些属性

（2）带参数的混合

（3）带默认参数的混合

（4）不带参数的混合 --- 如果想隐藏这个属性集合，不让它暴露到CSS中

（5）利用@arguments变量

（6）模式匹配下的混合

下面是对每一种混合的使用示例：

（1）定义通用属性集为class，在另外一个class里调用这些属性

1、在less文件中编写下面的代码

2、编译后的CSS样式结果：

PS: .clearfix的属性里调用了.clear的属性集，经过less的编译器的处理，会将.clear里声明的属性编译到.clearfix的属性里，减少了代码量。

（2）带参数的混合

1、在less文件中编写下面的代码

2、编译后的CSS样式结果：

注：

1、在选择器里书写属性，调用这个声明，并传入一个参数值，参数值必须传入，不然会出现报错，无法编译成CSS文件。

2、声明时可以使用多个变量，变量间用英文逗号隔开即可。

（3）带默认参数的混合(可传入参数覆盖默认参数)

1、在less文件中编写下面的代码

2、编译后的CSS样式结果：

（4）不带参数的混合 --- 如果想隐藏这个属性集合，不让它暴露到CSS中

1、在less文件中编写下面的代码

2、编译后的CSS样式结果：

注：声明的部分不会被编译到CSS文件中，和第一种混合有所区别。如果不想这个属性集合被编译器编译到CSS文件，可以采用这个混合方式。

（5）利用@arguments变量

1、在less文件中编写下面的代码

2、编译后的CSS样式结果：

注：@arguments有类似js的arguments的作用。

（6）模式匹配下的混合

1、在less文件中编写下面的代码

2、编译后的CSS样式结果：

说明：

.sanjiao-top调用triangle时匹配的是第一个参数为top的triangle

.sanjiao-right调用triangle时匹配的是第一个参数为right的triangle

注：可以对多个参数匹配，只要多个参数一一对应，就能编译成功。

三、嵌套规则--- LESS可以让我们以嵌套的方式编写层叠样式

PS：

1、经过编译后的结果和用CSS去编写一样。但是使用Less去编写，代码会简洁，更有层次感。

2、在Less的嵌套规则中 & 符号代表父级选择器，如果是编写伪类或伪元素的串联选择器，& 符号后面紧跟选择器，没有空格。

四、避免编译--- 需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法。

方式：在字符串前加上一个 ~,将要避免编译的值用 ""包含起来

五、注释的编写

/**/ 格式编写的会被编译，保留这个注释

//格式编写的不会被编译，在生成的CSS文件中没有这个注释

Less还有运算、color函数、命名空间、作用域、importing等功能，在这里就不一一介绍了，官网里也讲的非常详细，会了上面经常使用的这些，再去官网看一下，基本上就能搞清楚了。

入门时推荐less文件的编译器使用koala来编译，koala编译器的功能强大，编译出错会提示，能提示是那里的语法出错，也易上手学习。

koala的官网下载地址：http://koala-app.com/