概览
Less（Leaner Style Sheets 的缩写）是一门向后兼容的CSS扩展语言。这里呈现的是Less的官方文档（中文版），包含了Less语言以及利用JavaScript开发的用于将Less样式转换成CSS样式的Less.js工具。因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。Less支持变量、嵌套、混合方法、继承、注释、函数等特点。
- Less官网
- Bootstrap网站的 less 文档
less的语法
一、变量
声明less变量，只需在属性名前加“@”，使用时用@+变量名即可。例子如下：
main.less
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}编译成css文件如下：
main.css
#header {
width: 10px;
height: 20px;
}二、嵌套
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}用Less语言我们可以这样书写代码：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}三、混合
无参数方法
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：
.conter {
width: 100px;
height: 100px;
.conterWap {
border-radius: 50%;
box-shadow: 0 0 10px rgba(red, green, blue, .3);
}
}如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：
.test {
.conter;
//.conter();括号可加可不加
}生成的.css文件代码如下：
.conter {
width: 100px;
height: 100px;
}
.conter .conterWap {
border-radius: 50%;
box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}
.test {
width: 100px;
height: 100px;
}
.test .conterWap {
border-radius: 50%;
box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}默认参数方法
.less文件代码如下：
.border(@a: 2px, @b: 2px, @c: 10px, @coloe: #555) {
border: @a @coloe solid;
// @arguments指代传进来的全部参数
box-shadow: @arguments;
}
.wrap1 {
.border();
}生成的.css文件代码如下：
.wrap1 {
border: 2px #555 solid;
box-shadow: 2px 2px 10px #555;
}方法的匹配模式
.less文件代码如下：
//方法的匹配模式
.trangle(top, @color: #555, @width: 50px) {
border-color: transparent transparent @color transparent
}
.trangle(left, @color: #555, @width: 50px) {
border-color: transparent @color transparent transparent
}
.trangle(bottom, @color: #555, @width: 50px) {
border-color: @color transparent transparent transparent
}
.trangle(right, @color: #555, @width: 50px) {
border-color: transparent transparent transparent @color
}
.trangle(@_, @color, @width) {
border-width: @width;
border-style: solid
}
.wrap2 {
.trangle(bottom, #333, 20px);
}生成的.css文件代码如下：
.wrap2 {
border-color: #333 transparent transparent transparent;
border-width: 20px;
border-style: solid;
}数量不定的参数
.less文件代码如下：
//数量不定的参数
.boxShadow(...) {
box-shadow: @arguments;
}
.wrap3 {
.boxShadow(0 0 10px #666)
}生成的.css文件代码如下：
.wrap3 {
box-shadow: 0 0 10px #666;
}循环方法
.less文件示例代码如下：
.xunhuan(4);
.xunhuan(@n, @i: 1) when (@i <=@n) {
.test@{i} {
width: (@i*100% / @n);
}
.xunhuan(@n, (@i+1))
}生成的.css文件代码如下：
.test1 {
width: 25%;
}
.test2 {
width: 50%;
}
.test3 {
width: 75%;
}
.test4 {
width: 100%;
}四、继承
extend关键字的使用
extend是Less的一个伪类。它可继承所匹配声明中的全部样式。
从表面来看，extend和方法最大的差别，就是extend是同个选择器共用一个声明，而方法是使用自己的声明，这无疑增加了代码的重复性。
下面是方法和extend之间的比较（.less文件）：
.conter {
width: 100px;
height: 100px;
.conterWap {
border-radius: 50%;
box-shadow: 0 0 10px rgba(red, green, blue, .3);
}
}
// 方法
.test {
.conter();
}
// 使用extend
.test {
&:extend(.conter all);
}生成的.css文件代码如下：
// 方法生成的.css文件
.conter {
width: 100px;
height: 100px;
}
.conter .conterWap {
border-radius: 50%;
box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}
.test {
width: 100px;
height: 100px;
}
.test .conterWap {
border-radius: 50%;
box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}
// extend生成的.css文件
.conter,
.test {
width: 100px;
height: 100px;
}
.conter .conterWap,
.test .conterWap {
border-radius: 50%;
box-shadow: 0 0 10px rgba(red, green, blue, 0.3);
}&在less中的含义
表示当前层级（.clearfix）
.clearfix {
&::after,
&::before {
content: '';
display: table;
clear: both;
}
}生成的.css文件如下：
.clearfix::after,
.clearfix::before {
content: '';
display: table;
clear: both;
}五、注释
块注释和行注释都可以使用：
块注释会保留在生成的.css文件中，而行注释将不被保留，只存在于.less文件中。
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了！
@var: white;六、函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。
函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
