less 预编译

安装
npm install -g less

转换 文件+转换后文件名字 (会在当前文件夹生成文件)
lessc styles.less styles.css

+压缩
lessc --clean-css styles.less styles.min.css

使用
@color: #ccc; 变量

.h1{
color:@color;
}

混合(或者叫less的函数)
这里是函数
.rounded(@radius:5px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

混合使用
.header{
.rounded; 使用默认的5px圆角
.rounded(10px); 设置10px圆角
}

.rounded(@top-left,@top-right,@bottom-right,@bottom-left){
border-radius: @top-left,@top-right,@bottom-right,@bottom-left;
-webkit-border-radius: @top-left,@top-right,@bottom-right,@bottom-left;
-moz-border-radius: @top-left,@top-right,@bottom-right,@bottom-left;
}

.header{
.rounded; 使用默认的圆角
.rounded(10px,10px,10px,10px); 设置左上-右上-左下-右下的圆角
}

嵌套规则

hader{

.title{

}

.span{

> p{    //>代表css的直接子元素

}

}

.content{

&:after{ //&代表自己 所以可以用伪类元素

}

}

}

函数与运算
@the-border: 1px;
@base-color: #111;
@red: #842210;

header{

border-left: @the-border;
border-right: @the-border * 2;
color: @base-color + #003300;   

}

降级 如@red*10%的颜色

footer{

border-color:desaturate(@red,10%)

}