less
安装
在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器），方法如下：
$ npm install -g less命令行用法
安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：
$ lessc styles.less
这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件：
$ lessc styles.less > styles.css若要输出压缩过的 CSS，只需添加
-x 选项。如果希望获得更好的压缩效果，还可以通过 --clean-css 选项启用 Clean CSS 进行压缩。（在此之前要通过npm安装less-plugin-clean-css插件）执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。
使用
一 变量（变量是按需加载的，不必强制在使用之前声明。sass必须先声明，不然报错）
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
还可以在定义变量时使用其他的变量
字符串插值：
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
二 混合（Mixins） 直接定义类名 使用的时候也不需要@extend
1. 如果想隐藏属性集合，不让它暴露在css中，但是又想在其他的属性集合中引用，就可以定义不带参数的属性集合
2.多参数混合：可用逗号和分号，推荐使用分号（因为逗号还可表示一个参数中一组值的分隔符。）
3.使用同样的名字和同样同样数量的参数定义多个混合是合法的，在被调用时，less会应用到所有可用应用的混合上，比如你调用混合时只传了一个参数，那么所有只强制要求一个参数的混合都会被调用。 （只有一个参数没有默认值）
4. @arguments变量 包含了所有传递进来的参数。
.box-shadow (@x:0, @y:0, @blur:1px, @color:#000){
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box {
.box-shadow(2px, 5px);
}
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
5. !important 关键字 如果在混合后面加上!important关键字表示将混合带来的所有属性标记为!important
6. 几个检查类型的函数
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
如果需要检查一个值（数字）使用了哪个单位，可以使用下面三个函数：
- ispixel
- ispercentage
- isem
7. Guards 用来匹配表达式
.mixin (@a) when (lightness(@a) >= 50%) {
}
.mixin (@a) when (lightness(@a) < 50%) {
}
要点在于关键词 when，它引入了一个 guard 条件 （这里只用到一个 guard），你可以使用关键词 and 在 guard 中加入额外的条件:.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
三 嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
嵌套Media Queries
.one {
@media (width: 400px) {
font-size: 1.2em;
@media print and color {
color: blue;
}
}
}
四 运算
六 命名空间
七 导入 可以导入CSS文件，也可以导入LESS文件。但只有导入的LESS文件才会被处理（编译），导入的CSS文件会保持原样。如果你希望导入一个CSS文件，保留.css后缀即可。对导入CSS文件只做一处处理：将导入的语句提到最前，紧跟在@charset之后。
@import "library.less" screen and (max-width: 400px); // 通过media query指定的import@import "library.less"; // 无media query的import
