LESS-CSS预处理语言局部定义嵌套在其他地方使用时可当做参数切换传递属性。偷懒来讲就是less语法中我们所定义的变

变量

使用变量 less允许定义变量到全局样式中复用

  @banner-color: #fff;
  .banner{
      background-color: @banner-color;
  }
  // 局部定义
  .banner(@banner-color: #fff){
      background-color: @banner-color;
  }

变量作用域 变量定义同样是有层级关系我们看一个案例就能了解

  @width: 200px;
  .box{
      @width: 100px;
      .box1{
          width: width;
      }
  }
  .box2{
      width: width;
  }
  // box1 width: 100px
  // box1 width: 200px
  // 找寻定义变量属性由内层找

Mixins

Mixins代表的是一种特性是一种混入继承模式，当使用less语法实现css时我们也可以实现这样的模式

嵌套模式 直接上案例：

  .banner(width: 10px){
      width: width;
  }
  // 直接写上时相当于完全定义属性
  .box{
      .banner;
  }
  // 将局部变量当做参数,多参同样是可以传递的
  .box1{
      .banner(5px);
  }

局部定义嵌套在其他地方使用时可当做参数切换传递属性。

DOM元素的层级关系也可以直接在css部分包裹：

  <style>
      .father{
          width: 100px;
          height: 100px;
          .son{
             width: 50px;
             height: 50px;
          }
      }
  </style>
  <div class="father">
      <div class="son"></div>
  </div>

&嵌套规则,代表自身(类名、id、标签都是可以的)

   .list{ 
       &-nav{...}
       // 等价于.list-nav
       &:hover{...}
       // 同样也可以写伪类元素等价于 .list:hover
   }

命名空间 避免重命名类名问题
```
 #content{
     .article{...}
     .logo{...}
 }
```
通过选择器选的时候就直接#content > .logo

运算及函数

偷懒来讲就是less语法中我们所定义的变量可以计算。 LESS只是css的一个框架还有SASS，LESS 和 SASS 互相促进互相影响。小编在实战之中更喜欢LESS感觉更加贴近css。