css预处理器：Less

1.实现webstrom自动编译less
①.安装node(less依赖于node)，win+R进入cmd，输入node -v 出现版本号，表明安装成功。
②.安装less编译器，在cmd中输入npm install less -g，其中cmd路径并没有指定。输入less -v出现版本号，表明安装成功。
③.配置webstrom。File->settings->Tools->File watchers->右上角+号->找到less->ok->中间出现less->把level下的project改成Global->Apply。
④.使用：创建index.less，下面会自动生成index.css和index.css.map。在html中用link引入index.css。
2. less的注释
/*css注释*/
//less注释
.less文件中的/**/注释会编译到.css文件中，//注释不会。所以//才是真正的less注释。
3. less的变量
①.把变量作为属性的值
定义变量：@bgcolor:red;
使用：background: @bgcolor;
②.把变量作为属性名
定义变量：@propName:border;
使用：@{propName}:10px solid #ccc;
③.把变量名当做选择器
定义变量：@selector:.box;
使用：@{selector}{width: 200px;}
4. less变量的作用域
#nav {
@width: 300px;
width: @width;
}
.box2{
//width: @width;在#nav中定义的@width不可以在另一个选择器中使用。
}
less变量的作用域发生在嵌套的时候，变量只在本作用域和下层作用域起作用。
5. less混合
less混合相当于自定义函数。
①.普通混合
例如：在box-inner中定义的样式，也想在box中使用。
.box-inner{
      width: 200px;
}
.box{
      .box-inner();//调用混合
}
编译后的css为：
.box-inner {
      width: 200px;
}
.box {
      width: 200px;
}
②.不带输出的混合
.box-inner(){
      width: 200px;
}
.box{
      .box-inner();
}
编译后的css为：
.box {
      width: 200px;
}
此时的混合不会输出，谁调用谁输出。
③.带参数的混合
.box-inner(@width,@height,@bgcolor){
      width: @width;
      height: @height;
      background: @bgcolor;
}
.box{
      .box-inner(200px,300px,blue);
}
编译后的css为：
.box {
      width: 200px;
      height: 300px;
      background: blue;
}
④.带参数，参数有默认值混合
.box-inner(@width,@height,@bgcolor:green){
      width: @width;
      height: @height;
      background: @bgcolor;
}
.box{
      .box-inner(200px,300px);
}
编译后的css为：
.box {
      width: 200px;
      height: 300px;
      background: green;
}
调用时，若不指定颜色，就按照默认的，指定了就按照指定的。
带默认值的要放在最后，不然传实参时直接就覆盖了。
⑤.带参数，参数有默认值，默认值不按顺序
.box-inner(@width,@height:200px,@bgcolor){
      width: @width;
      height: @height;
      background: @bgcolor;
}
.box{
      .box-inner(@width:200px,@bgcolor: blue);
}
编译后的css为：
.box {
      width: 200px;
      height: 200px;
      background: blue;
}
⑥.arguments用于获取所有的形参。适合于所有的参数都是某个复合属性的值。
.transition(@prop: all,@duration: 0s,@timing-function:ease,@delay:0s) {
      -webkit-transition: @arguments;
      -moz-transition: @arguments;
      transition: @arguments;
}
.box {
      .transition(width, 10s, linear);
}
编译后的css为：
.box {
      -webkit-transition: width 10s linear 0s;
      -moz-transition: width 10s linear 0s;
      transition: width 10s linear 0s;
}
过渡属性若有多个，比如width，height。调用混合时，每个混合的参数用分号隔开。
.box01 {
      .transition(width, height;10s;linear);
}
编译后的css为：
.box01 {
      -webkit-transition: width, height 10s linear 0s;
      -moz-transition: width, height 10s linear 0s;
      transition: width, height 10s linear 0s;
}
6. less条件判断
less 可以使用 when 关键字实现条件判断。
.arrow(@width,@color,@direction) when (@direction = left)
传参数时，若传给@direction的实参是left的时候。
7. less导入
通常，会把变量、混合单独的独立出来。
①.导入变量文件：@import url(variable.less);
②.导入css：@import url(style.css);less也可以导入css，不过 @import url(css文件);该语法其实是css语法，less并未处理,这行代码会原样显示到css中，此时css文件还是两个。工作中建议把后缀名改为.less，这样导入后代码都会编译到一个css中。
8.less嵌套
①.普通嵌套
ul{
      li{
      }
}
注意：在li中写:nth-child(odd)会被编译成li(空格):nth-child(odd)，若不想让中间有空格，写&:nth-child(odd)。
②.媒体查询嵌套
第一种嵌套形式：
@media screen {
      @media (max-width: 640px){
      }
}
编译后的css为：
@media screen {}
@media screen and (max-width: 640px) {}
第二种嵌套形式：
.container {
      @media (min-width: 640px) {
      }
      @media(min-width: 1024px){
      }
}
编译后的css为：
.container {
}
@media (min-width: 640px) {
      .container {
      }
}
把min-width:640px定义成变量：@min768: ~"(min-width: 640px)";
9.less运算符
+ - * / %
两个运算数，如果只有一个有单位，取这个单位；两个都有单位，取第一个的单位。颜色也可以运算。
@width:100px;
width: @width + 100px;
编译后的css为：
width: 200px;
10.less函数
less函数相当于内置函数。
@baseColor: #000;
color: lighten(@baseColor, 10%);把@baseColor的颜色调亮百分之十。
11.map
#名字() {
属性:值；
}
#名字[属性]
适合把一些列类似的变量合并一个map
#colors() {
bigRed: #f00;
}
.box {
color: #colors[bigRed];
}
编译后的css为：
.box {
color: #f00;
}