Less實戰（三）：混合（Mixins）

混合（Mixins）

混合（Mixin） 是一種將一組屬性從一個規則集包含（或混入）到另一個規則集的方法。
Less 中的作用域與 CSS 中的作用域非常類似。首先在本地查找變量和混合（mixins），如果找不到，則從“父”級作用域繼承。

@color: red;

.father{
    background:@color;
}

#son{
    color: @color;
    .father();
}

編譯後 >>>

---

Mixins中的選擇器

Mixins可以包含更多的屬性，這些屬性也能包含在選擇器中

.kok(){
    &:hover{
        color: blue;
    }
}

div{
    .kok();
}

編譯後 >>>

---

命名空間

可以在Mixins中指定多個屬性作爲子容器，方便拼接

#outer() {
    .inner1 {
      color: red;
    }

    .inner2{
        color: blue
    }
  }
  
  .c {
    #outer > .inner1();
  }

  .d{
      #outer > .inner2();
  }

編譯後 >>>
其他兩種寫法：
以 “ . ” 爲連接符指定屬性，有間隔 >>>
以 “ . ” 爲連接符指定屬性，無間隔 >>>

---

!important 關鍵詞

!important關鍵詞也能被繼承，而且會依次遍歷

---

參數傳遞

可以對Mixins進行傳參

#outer(@color) {
        color: @color;
}
.c{
    #outer(red)
}

---

混合匹配選擇器

@_表示默認選擇，@switch會根據傳參匹配相關的參數來編譯成CSS樣式

.mixin(dark; @color) {
    color: darken(@color, 10%);
  }
  .mixin(light; @color) {
    color: lighten(@color, 10%);
  }
  .mixin(@_; @color) {
    display: block;
  }

@switch: dark;

.class {
  .mixin(@switch; #888);
}

---

函數功能

可以像js的函數一樣進行傳參和計算

.calc(@a,@b){
    @result:(@a+@b);
}

div{
    width:.calc(10,20)[@result];
}

---

混疊（Aliasing Mixins）

可以像設置js數組一樣，設置多個可選擇的組合

.color(){
    primary:red;
    secondary:grey;
}

div{
    color:.color()[secondary];
}

---

以上就是less的變量知識總結,函數部分涉及變量和判斷，我會單獨放在下一章進行講解