Less 混入

混合相似於編程語言中的函數。

Mixins 是一組CSS屬性，容許咱們將一個類的屬性嵌套於另外一個類，被嵌入的類能夠看做是變量，而且包含類名做爲其屬性，也就是說咱們能夠用一個類定義樣式而後把它看成變量，在另外一個類中，只要引用變量的名字，就可以使用它的全部屬性。

在Less中，可使用類或者是id選擇器以與CSS樣式相同的方式聲明mixin，它能夠存儲多個值，而且能夠在必要的時候在代碼中重複使用。

注意：當咱們調用mixin時，括號是可選的。

不輸出mixin### 不輸出mixin

若是要建立一個mixin，可是又不想要輸出mixin的話，咱們能夠在它的後面加上一個括號。

.myMixin1 {
      color: green;
    }
    .myMixin2() {
      background: red;
    }
    .allMixin {
      .myMixin1;
      .myMixin2;
    }
    
    // 輸出
    .myMixin1 {
      color: green;
    }
    .allMixin {
      color: green;
      background: red;
    }

Mixins 中的選擇器

Mixins不只能夠包含屬性，還能夠包含選擇器。

.myxkd-mixin() {
      &:hover {
      	color: red;
      	font-size: 30px;
        border: 1px solid green;
      }
    }
    button {
      .myxkd-mixin();
    }
    
    // 輸出
    button:hover {
      	color: red;
      	font-size: 30px;
        border: 1px solid green;
    }

命名空間

若是要在更復雜的選擇器中混合屬性，則能夠堆疊多個ID或類。

#outer {
      .inner {
        color: green;
      }
    }
    .xyz {
      #outer > .inner;
    }
    
    // 一樣>和空白都是可選的
    #outer > .inner;
    #outer > .inner();
    #outer .inner;
    #outer .inner();
    #outer.inner;
    #outer.inner();

保護的命名空間

若是名稱空間具備保護，則僅當保護條件返回true時，才使用由其定義的混合，命名空間保護的評估方式與mixin的保護方式徹底相同，好比下面的兩個mixin的工做方式就會同樣的：

#namespace when (@mode=huge) {
      .mixin() { /* */ }
    }
    
    #namespace {
      .mixin() when (@mode=huge) { /* */ }
    }

！important 關鍵字

!important 在mixin調用以後使用關鍵字將其繼承的全部屬性標記爲 !important 。

.xkd (@bg: #f44586, @color: #d902e7) {
      background: @bg;
      color: @color;
    }
    .unimportant {
      .xkd();
    }
    .important {
      .xkd() !important;
    }
    
    // 輸出
    .unimportant {
      background: #f44586;
      color: #d902e7;
    }
    .important {
      background: #f44586 !important;
      color: #d902e7 !important;
    }