less之路

1.less的使用方法 ：自行搜索

2.注释:

      //单行注释(通常用于生产环境)
      /**/多行注释
      区别:多行注释会被解析到css文件中,单行不会

3.变量

变量允许我们定义一系列通用的样式，然后在需要的时候去调用所以在做全局样式调整的时候我们可能只需
要修改几行代码就好了
    @符号开头：@width:12px;
     例子: @width:2px;
           @style:solid;
           @red:red;
           @blue:blue;
           .box1{
                width:200px;
                height:100px;
                border:@width @style @red;
          }
           .box2{
                width:200px;
                height:100px;
                border:@width @style @blue;
          }
           .box3{
                width:200px;
                height:100px;
                border:@width @style @red;
                background:@red;
          }
更改样式只需要引用变量名即可,方便

4.作用域（变量发生作用的区域）

  .box{
        @width:20px;
        .main{
            wdith:@width;
        }
  }
  这样是没问题的,{}就是域,和js一样
.box2{
    width:@width;//在这里引用@width变量
}
这样是错误的,会报错

4.嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码开起来更加
清晰。
例如：写一个导航栏
html结构:
  <nav>
      <div class='content'>
            <div.left>
                  <a href="#"></a>
                  <a href="#"></a>
                  <a href="#"></a>
            </div>
            <div.right>
                  <a href="#"></a>
                  <a href="#"></a>
                  <a href="#"></a>
            </div>
      </div>
  </nav>
  nav{
      height:50px;
      background:blue;
      .content{
          margin:0 auto;
          width:80%;
          a{
                color:#fff;
                &:hover{  //&符号代表a标签本身
                    color:red;
                }
          }
          .left{
                float:left;
                 &.padding-left{  //给.left添加padding-left，需要&符号,看编译好的css
                        padding-left:20px;
                  }
          }
          .right{
                floar:right;
          }
     }
}
结构很清晰,父子级等关系很明显

5.混合

@border:'border solid #ccc';
box{
    width:@border;
}
以上是错误的方式
混合：将一个定义好的classA引入到另一个classB中，从而实现classB继承classA中的所有属性
1.最简单的混合方式：
.classA{
      border:1px solid #ccc;
}
.clearFix{
    *zoom:1;
    &:after{
        content:' ';
        display:block;
        clear:both;
    }
}
//公用样式放到前面
.classB{
    .classA;
    .cleafFix;
}
2.带参数的混合:
.border(@color){
     border:1px solid @color;
}
.box1{
      .border(#ccc);
}
.box2{
      .border(#f00);
}
3.多个参数的混合
.border(@width,@style,@color){
     border:@width @style @color;
}
.box1{
      .border(1px,solid,#ccc);
}
.box2{
      .border(1px,solid,#f00);
}
.box3{
      .border(2px,solid,#f00);
}
.box3{
      .border(2px,dotted,#f00);
}
实参形参一一对应,一个都不能少
4.带默认值的参数混合
.border(@width:1px,@style:solid){
     border:@width @style #ccc;
}
.box1{
      .border(1px dotted);//如果修改第二个参数的话都必须传实参,一一对应
}
.box2{
      .border();
}
.box3{
      .border(2px);
}
.box3{
      .border();
}
5.arguments变量:代表了所有的参数(在不在乎参数顺序的时候可以使用)
.border(@style:solid,@width:1px){
     border:@arguments #ccc;
}
.box1{
      .border(1px dotted);//如果修改第二个参数的话都必须传实参,一一对应
}
.box2{
      .border();
}
.box3{
      .border(2px);
}
.box3{
      .border();
}
5.模式匹配
.border(top,@width:1px){
      border-top:@width solid #ccc;
}
.border(right,@width:1px){
     border-right:@width solid #ccc;
}
.border(bottom,@width:1px){
     border-bottom:@width solid #ccc;
}
.border(left,@width:1px){
     border-left:@width solid #ccc;
}
.border(@_,@width:1px){   
      width:100px;
}
.box1{
    .border(top,5px);
}
.box2{
    .border(right);
}
.box3{
    .border(bottom,round(2.3)*1px);//Math函数用法
}
.box4{
    .border(left);
}
//@_  代表公用样式,即使有@_，使用的时候还是要传首参
//Math()函数 ：
  round(5.5);四舍五入
  ceil(2.1);return 3  ，向上取整
  floor(2.9);return 2,  向下取整
6.命名空间
.blue{
      .button{
            background:blue;
      }
}
.red{
      .button{
            background:red;
      }
}
.box{
    .red > .button;
}
7.import
引入另一个less文件
@import 'global';//后缀名.less可加可不加
例如写一个样式重置,在里面可以定义一个变量@rem:32rem;这个变量可以直接使用
8.避免编译
.box{
      width:@rem;
      font:(12/@rem)~'/'(20/rem) '宋体';
}