less
是一种基于JavaScript的动态样式语言。它包含了一套自定义的语法以及一个编译器，我们可以根据语法定义自己记得样式规则，最终用编译器生成对应的css文件！
使用方法：
客户端使用
客户端使用的方法非常简单，直接将LESS的源文件引入网页即可，但是需要引入less.js的编译文件。如下：
<link rel="stylesheet/less" type="text/css" href="style.less">
<script type="text/javascript" src="less.js"></script>
这里有两个注意点：
（1）less.js一定要在LESS源文件后面引入，否则无法正确的识别。
（2）LESS的link里面的rel属性值是stylesheet/less，CSS却是stylesheet。
服务端使用
LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
npm install -g less
//执行将index.less 编译
lessc index.less > index.css
开发的时候 可以结合gulp就不是手动的一次次的生成，可以用gulp-watch监视less文件！！
语法
变量
变量是一个极其方便的东西，像js一样，变量可以在全局样式中使用，变量使得样式修改起来更加简单。LESS 中的变量和其他编程语言一样，可以实现值的复用，既然是变量，就有局部变量和全局变量之分。局部变量和全局变量的区别，跟js中的局部变量和全局变量的区别是类似的。
less 文件：
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
生成的css文件
/* 生成的 CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 :
less 文件:
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 此处应该取最近定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}
生成的CSS 文件：
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
less:
.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 文件:
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
混合
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
less:
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
css:
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
border-radius: 5px;
-webkit-border-radius:5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
}
Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。
嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
less:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover {//有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
border-width: 1px
}
}
}
}
css:
#header h1{
font-size: 26px;
font-weight: bold;
}
#header p{
font-size: 12px;
}
#header p a{
text-decoration: none;
}
#header p a:hover{
border-width: 1px
}
函数 & 运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。
LESS:
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
css:
/* 生成的 CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表：
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
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
less:
init: #f04615;
#body {
background-color: fadein(@init, 10%);
}
css:
#body {
background-color: #f04615;
}
less:
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}
@switch: light;
.class {
.mixin(@switch, #888);
}
css:
.class {
color: #a2a2a2;
display: block;
}
如上，.mixin就会得到传入颜色的浅色。如果@switch设为dark，就会得到深色。
具体实现如下：
第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值
注释
CSS 形式的注释在 LESS 中是依然保留的:
/* Hello, I'm a CSS-style comment */
.class { color: black }
LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }
Importing
你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:
@import "lib.less";
@import "lib";
如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀LESS就会跳过它不去处理它.:
@import "lib.css";
字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
避免编译
有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.
要输出这样的值我们可以在字符串前加上一个 ~, 例如:
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
我们可以将要避免编译的值用" "包含起来，输出结果为:：
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
JavaScript 表达式
JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:
@var: `"hello".toUpperCase() + '!'`;
输出:
@var: "HELLO!";
它也可以访问JavaScript环境:
@height: `document.body.clientHeight`;
如果你想将一个JavaScript字符串解析成16进制的颜色值, 你可以使用 color 函数:
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);
