Less语法

参考：http://www.imooc.com/article/16455

变量、注释和运算

在less文件中，当一个值需要反复使用时，可以通过@符号定义变量。已经被赋值的变量以及其他的常量（如像素、颜色等）都可以参与运算。在less中和大多数编程语言一样，可以使用“//”作为注释，注释的内容不会被编译到CSS文件中去。如以下less代码：

@charset"utf-8";/*CSS的注释编译时会保留*/@box_width:300px;//定义并初始化变量.box{ width:@box_width+100;//使用变量,并进行运算 height:@box_width-2*50;//注意变量和数字之间要留空格，否则编译不通过 background: yellow;}

编译后的CSS代码如下：

@charset"utf-8";/*CSS的注释编译时会保留*/.box{ width:400px; height:200px; background: yellow;}

4、混合与嵌套

如下less代码，box3的样式里面引用了box的所有样式，并且额外的还设置了左外边距为100px。混合就是把一个样式的选择器作为值写在另一个样式里。

.box3{//引用box的全部样式并且使得左边距为100px.box; margin-left:100px;}

编译后的CSS代码如下：

.box3{ width:400px; height:200px; background: yellow; margin-left:100px;}

除了这种最简单的混合外，less还支持带参数的混合以及有默认参数值的混合。如下面的例子所示：

//带参数的混合.border_width1(@b_width){ border: solid blue@b_width;}.test_mix1{.border_width1(5px);}//参数有默认值的混合.border_radius(@radius:5px){ border-radius:@radius;-webkit-border-radius:@radius;-moz-border-radius:@radius;}.test_radius{.border_radius();//此处即为默认值，若要修改默认值也可在此处进行修改 width:100px; height:20px; background: pink;}

编译后的CSS文件如下：

.test_mix1{ border: solid#0000ff 5px;}.test_radius{ border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px; width:100px; height:20px; background: pink;}

有的时候，需要一次性将所有的参数全部传进去，此时使用@arguments可以更加方便。

//@arguments代表传进所有的参数.border_arg(@c:red,@w:3px,@x:solid){ border:@arguments;}.test_arg{.border_arg(40px);//查看CSS文件的变化，默认值传进来了，线粗改为40px}

css文档编译后如下：

.test_arg{ border:40px3px solid;}

在HTML文档中，标签之间经常会有嵌套的情况存在，在less中也可以进行嵌套。有下列HTML标签：

<ulclass="list"><li><ahref="#">这是一个测试文字</a><span>2014-10-10</span></li><li><ahref="#">这是一个测试文字</a><span>2014-10-10</span></li><li><ahref="#">这是一个测试文字</a><span>2014-10-10</span></li><li><ahref="#">这是一个测试文字</a><span>2014-10-10</span></li><li><ahref="#">这是一个测试文字</a><span>2014-10-10</span></li><li><ahref="#">这是一个测试文字</a><span>2014-10-10</span></li></ul>

使用less为其添加样式，可以使用嵌套。

//嵌套.list{ width:600px; margin:30pxauto; padding:0; list-style: none; li{//嵌套在list下的li height:30px; line-height:30px; background: pink; margin-bottom:3px; padding:010px;} a{//也可以嵌套在li里面，但是嵌套层次太多影响CSS的效率float: left;//&代表上一层选择器&:hover{ color: red;}} span{float: right;}}

编译后的CSS如下所示：

.list{ width:600px; margin:30pxauto; padding:0; list-style: none;}.list li { height:30px; line-height:30px; background: pink; margin-bottom:3px; padding:010px;}.list a {float: left;}.list a:hover{ color: red;}.list span {float: right;}

两者相比较而言，less的确省去了很多的代码量。

5、匹配模式

在开发前端页面的过程中，经常会有样式相近重复率高的情况出现。比如编写一个三角箭头小图标，颜色、大小、箭头朝向在不同的地方各不相同。如果一个一个地去写样式就非常麻烦。less中的匹配模式，就可以统一模板，在需要的时候，根据情况调用即可。

//匹配模式：三角形小图标的例子.triangle(top,@width:5px,@color:white){//匹配三角形朝上的情况 border-color:transparent transparent @color transparent; border-width:@width;}.triangle(bottom,@width:5px,@color:white){//匹配三角形朝下的情况 border-color:@color transparent transparent transparent; border-width:@width;}.triangle(left,@width:5px,@color:white){//匹配三角形朝左的情况 border-color:transparent@color transparent transparent; border-width:@width;}.triangle(right,@width:5px,@color:white){//匹配三角形朝右的情况 border-color:transparent transparent transparent @color; border-width:@width;}.triangle(@_,@width:5px,@color:white){//无论什么情况都要执行的代码,第一个参数是固定的格式 width:0; height:0; overflow: hidden; border-style:solid;}.sanjiao{.triangle(left,10px,black);}

上面的less中通过3个参数，将颜色、线条和朝向都构造成了相应的匹配模式，最后调用了黑色、线条为10px、朝左的箭头。css样式表中如下：

.sanjiao{ border-color: transparent #000000 transparent transparent; border-width:10px; width:0; height:0; overflow: hidden; border-style: solid;}

6、避免编译

有些情况下，我们不需要less中的某些内容被自动编译，而是保留下来原样放到CSS中，此时可以使用~‘ ’：

//避免编译.test_avoid{ width:~'(300px-100px)';}

css中的代码如下：

.test_avoid{ width:(300px-100px);}

上述就是less中的基本内容，总之less可以极大的减少css代码的编写量，易学易用，可以像编程一样对HTML中标签进行样式设计。

作者： Run_er 

链接：http://www.imooc.com/article/16455

来源：慕课网