less和less-loader版本问题以及less基本语法使用（看这篇就够了）

1、less和less-loader版本问题

可以直接按照以下命令安装即可（一定要严格控制版本号，以下版本可以完美解决依赖冲突问题）：
npm install less@3.9.0 less-loader@4.1.0 --save-dev或
cnpm install less@3.9.0 less-loader@4.1.0 --save-dev（这个是针对配置了淘宝镜像的安装方法）

2、查看是否安装成功对应的版本号的方法；

在package.json文件中进行查看是否安装成功对应版本的less和less-loader;

3、lesss基本语法：

//1、less嵌套（这个其实是最重要的一个用法，必须要会的，其他用法先了解即可）
.div{
    .div{width: 20px;}
    a{width: 20px;}
}
//输出 .div .div{width:20px;} .div a{width: 20px;}


//2、less变量
@ser_width:30px; /*@变量名:值*/
.box{width:ser_width; }
//输出 .box{width:30px;}


//3、less混合
.border{border:1px solid #aaa;.box;}
//输出 .border{border:1px solid #aaa;width:300px;}


//4、less混合可带参数（可多个）
.border2(@border_width){border:@border_width solid #aaa;}
.box2{.border2(30px;)}
//输出 .box2{border:30px solid #aaa;}


//5、less混合带默认值（可多个）
.border3(@border_width:10px){border:@border_width solid #aaa;}
.box3{.border3()}
//输出 .box3{border:10px solid #aaa;}


//6、less匹配模式画三角形
.div(top,@w:10px,@c:red){
    border-width:@w; 
    border-color:@c transparent transparent transparent;
    border-style:solid dashed dashed dashed;
}
//@_的意思是匹配到上面的样式（后面的参数一定要一致）
.div(@_,@w:10px,@c:red){  
    width: 0;
    height: 0;
    overflow: hidden;
}
.div{.div1(top);}
//输出 .div{
            width: 0;
            height: 0;
            overflow: hidden; //overflow解决ie6下最小高度的问题
            border-width: 10px;  //决定三角形的大小
            border-color: red transparent transparent transparent;  //那边朝下就把那边设颜色，其余透明
            border-style: solid dashed dashed dashed;  //dashed解决ie6下黑边的方法  
        }


//7、less运算
@ser_width:30px;
box4{width:@ser_width+20;}
//输出 .box4{width:50px;}


//8、less的@arguments变量
.div5(@w:20px,@xx:solid,@c:#aaa){
    border:@arguments;
}
//输出  .div5{border:20px solid #aaa;}


//9、less避免编译
.div6{width: ~'calc(50px-30px)';}  //calc是要浏览器计算值
//输出  .div6{width:calc(50px-30px);}