Less參數混合

Mixins 具備多個參數

* 參數可使用逗號或分號分隔。 （建議使用分號，由於逗號具備雙重含義：能夠將其解釋爲mixin參數分隔符或者是css列表分隔符）；使用逗號做爲mixin分隔符使不可能建立逗號分隔的列表做爲參數。

• 參數mixin使用一個或多個參數，經過參數和它的屬性來擴展Less的功能，以達到在混合到另外一個塊時自定義mixin輸出的效果。
• 若是編譯器在mixin調用中或者是聲明中看到至少一個分號，那麼假設這個歌參數用分號分隔的話，而且全部逗號都屬於css列表，咱們能夠有如下幾種狀況：
  • 兩個參數，每個包含逗號分隔的列表：.name(1, 2, 3; something, else)
  • 三個參數，而且每一個包含一個數字：.name(1, 2, 3)
  • 使用虛擬分號建立混入調用一個參數包含逗號分隔的CSS列表：.name(1, 2, 3;)
  • 逗號分隔的默認值：.name(@param1: red, blue;)

命名參數

mixin引用時能夠經過名稱而不是位置來提供參數值，能夠經過名稱來引用任何參數任何參數均可以經過它的名稱來引用，而不是特定的順序 。

.mixin(@color: green; @font-size: 18px; @padding: 15px; @margin: 10px;) {
      color: @color;
      font-size: @font-size;
      padding: @padding;
      margin: @margin;
    }
    .name1 {
      .mixin( @color: blue; @margin: 20px;);
    }
    .name2 {
      .mixin(red; @padding: 30px; @font-size:40px;);
    }
    
    // 輸出，改變後的值改變，沒有從新賦值的值默認原值
    .name1 {
      color: blue;
      font-size: 18px;
      padding: 15px;
      margin: 20px;
    }
    .name2 {
      color: red;
      padding: 30px;
      font-size:40px;
      margin: 10px;
    }

@arguments 變量

@arguments 在JavaScript中表明全部的參數，在mixin內部一樣有特殊含義，它包含調用mixin時傳遞的全部參數；若是咱們不想處理單個參數，它將會很是適用。

.box-shadow(@x: 0; @y: 0; @blur: 20px; @color: green) {
      -webkit-box-shadow: @arguments;
         -moz-box-shadow: @arguments;
              box-shadow: @arguments;
    }
    .argVar {
      .box-shadow(2px; 11px);
    }
    
    // 輸出
    .argVar {
      -webkit-box-shadow: 2px 11px 20px green;
         -moz-box-shadow: 2px 11px 20px green;
              box-shadow: 2px 11px 20px green;
    }

高級參數和@rest變量

... 若是您但願mixin接受可變數量的參數，則可使用。在變量名以後使用此命令會將這些參數分配給變量。

// 1:匹配0-n參數
    .mixin(...) {}
    // 2:徹底匹配0個參數
    .mixin() {}      
    // 3:匹配0-1個參數
    .mixin(@a: 1) {}    
    // 4:匹配0-n參數
    .mixin(@a: 1; ...) {}  
    // 5:匹配1-n個參數
    .mixin(@a; ...) {}

模式匹配

經過將參數傳遞給它來改變mixin的行爲。