less語法（二）混合屬性

摘要：

　　前面介紹了less的變量和extend語法，今天在研究下混合屬性(Mixin)。混合能夠說是less的另外一個特徵，你能夠將通用屬性定義在一塊，而後使用時直接調用此混合屬性。

混合：

　　在 LESS 中咱們能夠定義一些通用的屬性集爲一個選擇器，而後在另外一個選擇器中去調用這些屬性. 例如：

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

 

編譯後

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

 

注意：在調用混合時，能夠加括號也能夠不加括號。下面這個也是對的：

.a, #b {
  color: red;
}
.mixin-class {
  .a;
}
.mixin-id {
  #b;
}

 

若是你只想定義一個混合，則能夠再選擇器後面加上括號，以下：

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

 

編譯後，加括號的.my-other-mixin()不會被編譯。

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

 

任何 CSS class, id 或者 元素 屬性集均可以以一樣的方式引入.通用選擇器中能夠嵌套選擇器。

命名空間：

　　若是你想混合屬性在一個更復雜的選擇器,能夠疊放多個id或類。以下：

#outer {
  .inner {
    color: red;
  }
}

 

若是想使用這個混合屬性，你能夠這樣，下面四個都是等價的

.c{
    #outer > .inner;
}

.c{
    #outer > .inner();
}

.c{
    #outer.inner;
}

.c{
    #outer.inner();
}

 

你能夠將混合屬性定義在一個id的下面，這樣就避免了與其餘混合衝突。

關鍵字!important：

　　在使用混合屬性後面加上!important關鍵字，則混合中的全部屬性都會加上關鍵字!important。例如：

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo(1);
}
.important {
  .foo(2) !important;
}

 

編譯後

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

 

帶參數的混合：

　　混合屬性也能夠經過括號傳遞參數，以下：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

 

咱們只須要在使用它的時候傳遞一個參數便可，以下：

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

 

固然咱們也能夠給參數一個默認值，這樣使用的時候能夠傳值也能夠不傳值。以下：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

 

若是咱們沒有傳值，則會使用默認值5px。

固然咱們也能夠傳遞多個參數，以下：

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

 

編譯後

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

 

從編譯的結果能夠看出，less也有函數重載的特性。當咱們定義相同混合屬性名，參數不一樣，而後.mixin(#008000);調用，第一和第二混合都能匹配，可是第三個缺乏參數@padding的值，因此不會引用第三個混合屬性。

咱們不只能夠傳多個值，還能夠指定屬性名傳值，以下：

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

 

關鍵字@arguments:

　　@arguments有特殊的含義，相似於js的arguments，他包含了傳遞給混合屬性的全部參數，以下：

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

 

編譯後

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

 

關鍵字@reset:

　　與@arguments不一樣的是@reset包含除指明參數以外的參數，例如：

.mixin(@a; @rest...) {
   // @rest包含了@a以後的參數
   // @arguments包含了全部參數
}

 

模式匹配：

　　有時候你想讓混合根據你傳入的參數作不一樣的事情，好比：

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


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

 

對於.class你賦給變量@switch不一樣的值，不一樣的混合屬性會被調用，好比

@switch: light;

 

編譯後

.class {
  color: #a2a2a2;
  display: block;
}

 

做爲函數使用Mixin：

　　當咱們把混合當作函數使用時，在調用函數以後，函數中的變量是可使用的，除非調用混合屬性的元素本身定義了一樣的變量。好比：

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}

 

編譯後

.caller {
  width:  100%;
  height: 200px;
}

 

使用表達式：

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

 

編譯後

div {
  padding: 33px;
}