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 : 40px 3px solid ; }

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

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

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

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

编译后的CSS如下所示：

. list { width : 600px ; margin : 30px auto ; padding : 0 ; list - style : none ; } . list li { height : 30px ; line - height : 30px ; background : pink ; margin - bottom : 3px ; padding : 0 10px ; } . 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

来源：慕课网