less让css具有动态语言的特性

.demo{
color: #888 / 4;
}

输出：

.demo {
color: #222222;
}

Less 完全可以进行复杂四则运算，同样的复合运算也没有问题。
6、Color 函数
Less 提供了一系列的颜色运算函数。颜色会先被转化成 HSL 色彩空间，然后在通道级别操作。

lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2

使用起来相当简单：

@base: #f04615;
.class {
color: saturate(@base, 5%);
background-color: lighten(spin(@base, 8), 25%);
}

还可以提取颜色信息：

hue(@color); // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color); // returns the ‘lightness’ channel of @color

例如：

@color: #f36;
#header {
background-color: hsl(hue(@color),45%,90%);
}

输出：

#header {
background-color: #f1dae0;
}

7、Math 函数
Less 提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值。

round(1.67); // returns 2
ceil(2.4); // returns 3
floor(2.6); // returns 2

如果你想将一个值转化为百分比，你可以使用 percentage 函数：

percentage(0.5); // returns 50%

8、命名空间
有时候，你可能为了更好组织 css 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，你可以像下面这样在 #form 中定义一些属性集之后可以重复使用：

#form {
.submit () {
display: block;
border: 1px solid black;
background: gray;
&:hover { background: green }
}
.register { … }
.login { … }
}

你只需要在 #myform 中像这样引入 .submit：

#myform {
color: orange;
#form > .submit;
}

9、作用域
和其他编程语言类似，less 变量也有作用域。首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。

@var: red;
#page {
@var: white;