这里将直接以实例的方式展示 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.样式函数
//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 定义样式函数支持传参，默认值定义。
除此之外，LESS 样式函数也能像 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; }
未完待续...
原文：http://www.cnblogs.com/czf-zone/p/4364953.html