这里将直接以实例的方式展示 LESS 的基本语法。
less code 是编译前的代码，css code 是编译后的代码。
本文的内容，同样是引自【http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/】
1.变量
//less code //定义一个变量 @border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; }
//css code
.mythemes tableBorder { border: 1px solid #b5bcc7; }
变量最常用的情境是定义主题，像字体颜色，背景颜色，边框样式等进行统一定义，统一定义图片资源路径也是一个不错的做法。
LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念。
查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。
//less code @width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width; //此处应该取最近定义的变量 width 的值 30px } } #leftDiv { width : @width; //此处应该取最上面定义的变量 width 的值 20px }
//css code #homeDiv #centerDiv { width: 30px; } #leftDiv { width: 20px; }
2.混合Mixins
//less code //定义一个模块 .roundedCorners(@radius:5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .roundedCorners; } #footer { .roundedCorners(10px); }
//css code #header { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #footer { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
从上面的例子我们可以看出，LESS 的 Mixins 特性支持传参，默认值定义，我个人觉得如果你不是概念强迫症患者的话，完全可以把它当成是样式函数来理解。
除此之外，Mixins 也能像 Javascript 那样使用 arguments 变量，只是有一点点小区别。
在 LESS 里，@arguments 变量表示所有的变量，很多时候通过使用它，我们可以少写很多代码，请看下面例子：
//less code //定义一个模块 .boxShadow(@x:0, @y:0, @blur:1px, @color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } #header { .boxShadow(2px, 2px, 3px, #f36); }
//css code #header { -moz-box-shadow: 2px 2px 3px #f36; -webkit-box-shadow: 2px 2px 3px #f36; box-shadow: 2px 2px 3px #f36; }
我们甚至能利用参数生产类名~
.create-color-btn (@color-name, @background-color, @border-color, @font-color) { .btn-@{color-name} { background: @background-color; border: 1px solid @border-color; color: @font-color; } .btn-@{color-name}:hover { background: @background-color * 1.05; border-color: @border-color * 1.05; } .btn-@{color-name}:active { background: @background-color * 0.9; border-color: @border-color * 0.9; } }
.create-color-btn(blue, #4bb1cf, #4bb1cf, #ffffff);
/* 生成的CSS这里就不发出来了 */
3.值运算
//less code @init: #111111; @transition: @init*2; .switchColor { color: @transition; }
//css code .switchColor { color: #222222; }
对于一些数值型的值，LESS 是支持进行加减乘除四则运算的。
此外，LESS 还提供了一组函数，专门针对颜色运算操作。
lighten(@color, 10%); //颜色淡化
darken(@color, 10%); //颜色加深
saturate(@color, 10%); //饱和度增加
desaturate(@color, 10%); //饱和度降低
fadein(@color, 10%); //透明度增加
fadeout(@color, 10%); //透明度降低
spin(@color, 10); //色调调整（+10）
spin(@color, -10); //色调调整（-10）
这组函数直接返回具体的色值，看下面实例：
//less code @init: #f04615; #body { background-color: fadein(@init, 10%); }
//css code #body { background-color: #f04615; }
4.嵌套规则
<div id="home"> <div id="top">top</div> <div id="center"> <div id="left">left</div> <div id="right">right</div> </div> </div>
//less code #home{ color: blue; width: 600px; height: 500px; border: outset; #top{ border: outset; width: 90%; } #center{ border: outset; height: 300px; width: 90%; #left{ border:outset; float: left; width: 40%; } #right{ border: outset; float: left; width: 40%; } } }
//css code #home { color: blue; width: 600px; height: 500px; border: outset; } #home #top { border: outset; width: 90%; } #home #center { border: outset; height: 300px; width: 90%; } #home #center #left { border: outset; float: left; width: 40%; } #home #center #right { border: outset; float: left; width: 40%; }
我们平时在编写 css 的时候，经常会遇到多层选择器嵌套的情况。
从上面的例子可以看出，LESS 可以用很简洁的代码来实现，有着更好的可读性。
同时，我们还可以使用 “&” 来进行同一层级的操作，比如组合类和伪类。
//less code .link{ text-decoration: none; &.red{ color: #f00; } &:hover{ text-decoration: underline; } }
//css code .link{ text-decoration: none; } .link.red{ color: #f00; } .link:hover{ text-decoration: underline; }
5.导入指令(Import)
less样式文件可通过 @import '文件路径'; 引入外部的less文件。
注意：
不带扩展名或带非 .less 的扩展名均被视为 less 文件;
@import 可出现在任何位置，而不像 css 的 @import 那样只能放在文件第一行。
另外 @import 还提供了6个可选配置项(分别为 reference，inline，less，css，once，multiple)，用来改变引入文件的特性。
1. @import (reference) "文件路径";
将引入的文件作为样式库使用，因此文件中样式不会被直接编译为 css 样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。
2. @import (inline) "文件路径";
用于引入与 less 不兼容的 css 文件，通过 inline 配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式文件
3.@import (less) "文件路径";
默认使用该配置项，表示引入的文件为 less 文件。
4.@import (css) "文件路径";
表示当前操作为 css 中的 @import 操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件
5.@import (once) "文件路径";
默认使用该配置项，表示对同一个资源仅引入一次。
6.@import (multiple) "文件路径";
表示对同一资源可引入多次。