一、安装方式
1.客户端使用（影响网页加载速度，不推荐）
编写less文件（rel=”stylesheet/less”,必须书写rel），然后html中引入less.min.js。
2.服务器端使用（推荐使用）
a.安装一款服务器端jd解析器，如node.js。
b.安装npm（npm install），使用npm在window环境下安装Less（npm install -g less）。
c.创建.less文件，webstrom绑定监听
webstrom会提示add watcher，点进去，然后点ok即可；也可以在File--Setting--Tool--File Watcher，点击右侧“+”，选择less，点ok。
d.编写html，引入css文件。
二、语法
1.变量
变量的值可以是数字、字符串、颜色、尺寸、透明度等任何合法的CSS属性值。
a.一般变量的引用
@color: #00d; //变量定义
.part-1 {
color: @color; //变量引用
}
编译后的CSS
.part-1 {
color: #00d;
}
b.LESS支持全局变量和局部变量
有局部优先使用局部变量，无局部使用全局；同等级变量，依据执行顺序，后面的变量将覆盖前面的变量
@color: #00d; //全局变量
.part-1 {
@color: blue; //局部变量放在引用前
color: @color;
@color: red; //局部变量放在引用后，将覆盖@color: blue;
}
编译的css
.part-1 {
color: red; //以局部变量@color: red编译。
}
c.字符串变量引用
@img: "../images/banner"; //记得加引号
.container{
.wh(200px,100px);
background: url("@{img}/boat.png"); //记得加引号
}
编译的css
.container{
width: 200px;
height: 100px;
background: url("../images/banner/boat.png");
}
d.属性变量
@color: color;
.content {
@{color}: #fff;
background-@{color}: #ddd;
}
预处理后的CSS
.content {
color: #fff;
background-color: #ddd;
}
2.嵌套
a. 一般嵌套
.container {
.wh(200px,100px);
.content-1 {
.wh(@height:600px);
}
.content-2 {
wh(300px,200px);
}
}
处理后的css
.container {
width: 200px;
height: 100px;
}
.container .content-1{
width: 500px;
height: 600px;
}
.container .content-2{
width: 300px;
height: 200px;
}
b. class嵌套
@nav:nav;
.@{nav} {
.wh(200px,100px);
}
处理后的css
.nav {
width: 200px;
height: 100px;
}
3.混合
a.公共样式混合
.wh(@width:500px,@height) { //定义初始化变量
width: @width;
height: @height;
}
.content-1 {
.wh(@height: 600px); //使用初始值（必须加@height: 600px）
}
.content-2 {
.wh(300px,200px); //不使用初始值
}
编译后的css
.content-1 {
width: 500px;
height: 600px;
}
.content-2 {
width: 300px;
height: 200px;
}
b.选择器混入
.font() {//小技巧tips：如果不想让该class显示在css中，请加()
font-size:14px;
font-weight: bold;
color:#fff;
}
//引用
.box {
.font;
.font();//两者都可以，()可以省略，同时写2次时，less只取1次的结果。
}
编译后的css
.box {
font-size: 14px;
font-weight: bold;
color: #fff;
}
c.命名空间混入（避免冲突）
#father{
.son(){
color: red;
}
}
//引用
.rule{
#father>.son;
}
编译出的css
.rule {
color: red;
}
d.带参数混入（对于阴影/倒角/过渡/动画都可以使用着这种方式）
.borderRadius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
//引用
.nav-bar{
.borderRadius(5px);
}
编译出来的css
.nav-bar {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
e.@arguments变量
.box-shadow(@x:15px;@y:5px;@blur:1px;@color:#000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.tab-content{
.box-shadow(5px; 5px);
}
模式匹配，@reset个人使用不多，可以自行查看less文档内容
4.运算
LESS可以使用加、减、乘、除、取余（+、 - 、* 、/ 、%）。
.box{
width: 500-200px; //编译结果 300px
}
5.函数
lighten(color, 45%) 返回指定颜色变淡20%后的值
darken(color, 55%) 返回指定颜色变深30%后的值
image-width(url) 获取图片宽度
image-height(url) 获取图片宽度
ceil(num) 向上取整
floor(num) 向下取整
.box{
width: ceil(525.5+200px); //向上取整，编译结果726px
}
6.循环及合并
a.循环
.columns(@n,@i:1)when(@i=<@n) { //外层循环----栅格的写法
.column-@{i} { //内层class名
float: left;
width: (@i*100% /@n);
}
.columns(@n,(@i+1));
}
//引用
.columns(2);
编译出来的css
.column-1{
float: left;
width:50%;
}
.column-2{
float: left;
width:100%;
}
b.合并（对于多属性合并写法的时候，可以使用）
.mixin() {
box-shadow+: inset 0 0 10px #ddd;
}
.boter{
.mixin();
box-shadow+:0 0 10px red;
}
编译的css
.boter{
box-shadow:inset 0 010px #ddd, 0 0 10px red;
}
7.:父元素选择器
.content{
&-new {
background-image: url("new.png");
}
&-tip1 {
background-image: url("tip.png");
}
&-tip2{
background-image: url("tip2.png");
}
}
编译出的css
.content-new{
background-image:url("new.png");
}
.content-tip1{
background-image:url("tip.png");
}
.content-tip2{
background-image:url("tip2.png");
}
8.其他
a.单行注释和多行注释
less支持单行注释和多行注释（css不支持单行注释），css解析结果只显示多行注释
b.引入文件
@import: 引入css或者less文件，如@import”1.less”。
三、项目中使用
1.定义公共less，定义各变量、嵌套、循环等等，如common.less。
//部分公共变量展示，为了节省空间故单行书写
.wh(@width:500px,@height){width:@width;height:@height;}
.ps(@position:absolute,@left,@top){position:@position;left:@left;top:@top;}
.borderRadius(@radius) {
-webkit-border-radius:@radius;-moz-border-radius:@radius;
border-radius:@radius;}
.font(){font-size:14px;font-weight: bold;color:#fff;}
.columns(@n,@i:1)when(@i=<@n) {
.column-@{i} {float: left;width: (@i*100% /@n);} .columns(@n,(@i+1));
}
.content{
&-tip1{background:url("tip.png") no-repeat;}
&-tip2{background-image:url("tip2.png") no-repeat;}
}
2.定义项目less，如index.less，并引入common.less。
3.书写html,引入编译后的css文件。
