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。