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%);