Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

Less的编译工具：

1、koala编译（下载地址：http://koala-app.com/index-zh.html，推荐）

2、Node.js库

3、浏览器端使用

下面来讲解一下less的语法：

1、less的开头

@charset "utf-8";

2、less的注释：

/**/：会被编译到css中

//：不会被编译到css中

3、变量：

less中变量的格式：@变量名:值;

@test_height:200px;.test_variable{    height:@test_height;}

4、混合（mixin）变量

<div class="test_blend"></div>.test_blend{    .border_radius(10px);}.border_radius(@radius){    border-radius: @radius;    -webkit-border-radius: @radius;    -moz-border-radius: @radius;}/*设置默认值*/.test_blend{    .border_radius();}.border_radius(@radius:5px){    border-radius: @radius;    -webkit-border-radius: @radius;    -moz-border-radius: @radius;}

5、匹配模式

类似于js中的if，但不完全是，满足条件后才能匹配。

例如用css画三角形

.test_sanjiaoxiing{    width: 0;    height: 0;    overflow: hidden;    border-width: 10px;    border-color: transparent transparent red transparent;    border-style: solid;}

其中的 overflow:hidden; 用于处理IE6最小高度的问题；

同时，在IE6中这种写法会出现黑边，解决办法如下：

border-style: dashed dashed solid dashed;

<div class="test_sanjiaoxing"></div>.test_sanjiaoxing{    .triangle(bottom);}.triangle(bottom,@w:5px,@c:#ccc){    border-width:@w;    border-color:@c transparent transparent transparent;    border-style:solid dashed dashed dashed;}.triangle(top,@w:5px,@c:#ccc){    border-width:@w;    border-color:transparent transparent @c transparent;    border-style:dashed dashed solid dashed;}.triangle(left,@w:5px,@c:#ccc){    border-width:@w;    border-color:transparent @c transparent transparent;    border-style:dashed solid dashed dashed;}.triangle(right,@w:5px,@c:#ccc){    border-width:@w;    border-color:transparent transparent transparent @c;    border-style:dashed dashed dashed solid;}.triangle(@_,@w:5px,@c:#ccc){    width:0;    height:0;    overflow:hidden;}

不管样式匹配的是top、还是bottom、还是left、还是right，都会带上 .triangle(@_,@w:5px,@c:#ccc); 的样式; @_ 是固定的格式。

条件表达式：利用条件表达式更准确、更严格地限制混合的匹配，通过 when 关键字实现。

<div class="test_mixin1">用条件表达式进行匹配测试1</div><div class="test_mixin2">用条件表达式进行匹配测试2</div>

/* less */.test_mixin1{    .mixin(12);}.test_mixin2{    .mixin(8);}.mixin(@a) when(@a>=10){    color:red;}.mixin(@a) when(@a<10){    color:yellow;}/* 编译后的css */.test_mixin1{    color:red;}.test_mixin2{    color:yellow;}

条件表达式中为关键字 true 时只表示布尔真值，如下两个混合是相同的：

.truth(@a) when(@a){ ... }.truth(@a) when(@a = true){ ... }

除了关键字true以外的值都视为布尔假，例如：

.test_truth{    .truth(30);/*不匹配上面任何一个混合*/}

导引序列用逗号（,）分割，当且仅当所有条件都符合时才能匹配成功

.mixin(@a) when(@a>10),(@a<10){ ... }

导引可以无参数，也可以对参数进行比较运算：

@media: mobile;.mixin(@a) when(@media=mobile){ ... }.mixin(@a) when(@media=desktop){ ... }.max(@a,@b) when(@a>@b){ width: @a; }.max(@a,@b) when(@a<=@b){ width: @b; }

若想基于值的类型进行匹配，可以使用 is* 函数：

.mixin(@a,@b:0) when(isnumber(@b)){ ... }.mixin(@a,@b:black) when(iscolor(@b)){ ... }

常用的检测函数：

iscolor：是否为颜色值；

isnumber：是否为数值；

isstring：是否是字符串；

iskeyword：是否为关键字；

isurl：是否为URL字符串

判断一个值是纯数字还是某个单位量，可使用下列函数：

ispixel：是否为像素单位；

ispercentage：是否为百分数；

isem：是否为em单位。

LESS条件表达式支持and、or（不是or关键字，这里用（，）来表示or的逻辑关系）和not来组合条件表达式：

.smaller(@a,@b) when(@a>@b){    color: black;}.math(@a) when(@a>10) and (@a<20){    color: red;}.math(@a) when(@a<10) and (@a>20){    color: blue;}.math(@a) when not(@a=10){    color: yellow;}.math(@a) when (@a=10){    color: green;}

6、运算（+、-、*、/）

@test_01:300px;.test_01{    width:@test_01 + 20;    color: #ccc-10;}

在变量@test_01中已经带有"px"，所以在运算时，20后面不需要加上"px"。

颜色也可以加减，但几乎不用，一般要用什么颜色直接用，不对其进行加减。

数学函数：

    round(@number)：对数值变量@number进行四舍五入；

    ceil(@number)：向上舍入；

    floor(@number)：向下舍入；

    precentage(@number)：百分比转换

7、嵌套

<ul class="list"><li><a><span></span></a></li></ul>.list{    ...    li{ ... }    a{        ...        &:hover{ ... }    }    span{ ... }}

a 标签可以放在 li 标签中，也可以直接放在 .list 中与li标签同级，但是把 a 标签放在 .list 中与放在 li 标签中相比，减少了匹配次数，所有将 a 标签放在 .list 中与 li 同级更好些。span标签同理。

还有上面中的 & ，代表上一层里的选择器。&有两个作用，一个是对伪类的使用（&:hover{ ... }），二是对连接的使用（&-item）。

8、@arguments变量：包含了所有传递进来的参数。（一般较少使用）

<div class="test_arguments"></div>.test_arguments{    .border_arg();/*默认值*/}.test_arguments{    .border_arg(40px);/*改变参数*/}.border_arg(@w:30px,@c:red,@xx:solid){    border:@arguments;}

其中 border:@arguments; 等同于 border:@w @c @xx; 
9、避免编译

当需输出不正确的css语法或者使用一些less不认识的专有语法时，可在字符串输出前加上 ~ ，并将不需编译的内容用""包含起来。例如：

width: calc(300px - 30px);/*本该在浏览器上计算，但是在编译时已经计算出结果,css中的结果为width:calc(270px);*/width: ~'calc(300px -30px)';/*这样在编译成css时会原封不动，不对其进行编译，css中的结果为 width: calc(300px - 30px);*/

10、！important关键字：使css样式层级优先级最高。

在混合中使用：会为所有混合带来的样式添加上!important

<div class="test_important"></div>

/* less */.test_important{    .border_radius() !important;}.border_radius(@radius:5px){    border-radius:@radius;    -webkit-border-radius:@radius;    -moz-border-radius:@radius;}/* 编译之后的css */.test_important{    border-radius:5px !important;    -webkit-border-radius:5px !important;    -moz-border-radius:5px !important;}

10、命名空间

把变量与混合封装起来，避免与其他地方定义冲突。看下面的例子：

/* less */@var-color: white;#bundle{    @var-color: yellow;    .button{ ... }    .tab(){ ... }    .citation(){ ... }    .oops{ ... }}#header{    ...    #bundle>.button;    #bundle>.oops;}/* css */#bundle .oops{    ...}#header{    ...   }

在 #bundle 中建立一个命名空间，在里面封装的变量及属性集合不会暴露到外部空间中。

需要注意的是：因为无参的混合不会暴露在最终的css代码中，而普通的属性集则会出现。所以 .oops 被暴露在了最终的css代码中。在定义命名空间和混合时要小心处理，避免带来潜在问题。

11、导入

LESS支持符合标准的导入方法，利用@import 命令可以导入外部LESS文件后CSS文件。

例如：在 main.less 文件中导入 lib.less 文件， .less后缀可带可不带；在 main.less 中导入 lib.css 文件，并不对该css文件进行编译，只需使用 .css 后缀。

@import "lib.less";@import "lib";@import "lib.css";

12、字符串插值

变量可以使用类似Ruby和PHP的方式嵌入到字符串中，方法是使用 @{name} 结构，通过 @{name} 来调用变量的值：

@base_url = 'http://coding.smashingmagazine.com';background-image: url("@{@base_url}/images/background.png");

13、JavaScript表达式

JavaScript表达式可以在LESS文件中使用，通过反引号的方式使用：

@var:`"hello".toUpperCase()+'!'`;

输出：

@var:"HELLO!";

也可以同时使用字符串插值和避免编译：

@str:"hello";@var:~'"@{str}".toUpperCase()+'!'';/* 输出 */@var:HELLO!;

也可访问JavaScript环境：

@height:'document.body.clientHeight';

可以使用颜色函数将一个JavaScript字符串解析成十六进制的颜色值：

@color:color('window.colors.baseColor');@darkcolor: darken(@color,10%);