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。