LESS-CSS预处理语言

变量

• 使用变量 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。