Mixins can also take arguments, which are variables pass to the block of selectors when it is mixed in.（當使用混合時，可以通過選擇器塊帶變數引數。）

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.box1 {
    background-color: #eee;
    .border-radius(10px);
}
Parametric mixins can also have default values for their parameters（帶引數的混合也可以設定預設的引數）
.border-radius(@radius:10px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.box1 {
    background-color: #eee;
    .border-radius(5px);
}
對於帶預設引數的混合，我們也可以像下面這種（不帶括號）直接呼叫

.box1 {
    background-color: #eee;
    .border-radius;
}
You can also use parametric mixins which don't take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets:（在使用引數混合模式時，也可以不帶引數。這是在想要隱藏css的規則集輸出，但是又需要在其他規則集裡包含它的屬性時非常有效的辦法）

.box1() {
    color: red;
}
.box2 {
    .box1;
}
輸出為：
.box2 {
  color: red;
}
Mixins With Multiple Parameters（多引數的混合）
Parameters are either semicolon or comma separated. It is recommended to use semicolon. The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or css list separator.（多引數可以使用分號或逗號來分離。推薦使用分號。逗號有兩層意思：可以作為混合的多引數的分離器，也可以作為css集的分離器）

Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists:
1.two arguments and each contains comma separated list: .name(1, 2, 3; something, else),
2.three arguments and each contains one number: .name(1, 2, 3),
3.use dummy semicolon to create mixin call with one argument containing comma separated css list: .name(1, 2, 3;),
4.comma separated default value: .name(@param1: red, blue;).
翻譯：
使用逗號作為混合的分離器可能會導致建立一個以逗號分隔的列表引數。另一方面，如果編譯器在混合聲明裡檢測到至少一個分號，那麼它就會假設分離器是以分號分隔的，並且會把所有的逗號都作為css集合分離器：
1、兩個都包含了以逗號作為分離的列表的引數：name:(1,2,3;something,else);
2、三個引數，每個都包含了一個數字：.name(1,2,3)；
3、使用一個沒有實際意義的分號去建立混合的引數時，意味著這個引數時以逗號分隔的css集：.name(1,2,3;)；
4、逗號分離器有預設的值：.name(@param1:red,blue;)。

It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. If you used the mixin with one parameter e.g. .mixin(green);, then properties of all mixins with exactly one mandatory parameter will be used:（定義多個有相同的名字和數量的引數的混合是合法的。less將會使用這些所有能應用的屬性。如果使用只有一個引數的混合例如（.mixin(green);），那麼，所有明確具有一個強制性引數（即只有一個沒有預設值的引數）的混合的屬性將會被使用）。
翻譯的太渣了，下面用例子來說明

首先定義三個相同名字，並且包含相同引數的三個混合（注意：第一個混合沒有預設值，第二個混合的第一個引數沒有預設值，第二個引數有預設值，第三個混合的第一個和第二個引數沒有預設值，第三個引數有預設值）

.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;
}
因為在使用混合時，只傳了一個引數，所以定義的第一個混合（只有一個引數，並且是強制性引數）的屬性被使用，第二個混合（有兩個引數，第一個引數沒有預設值，是強制性引數，第二個引數有預設值，不是強制性引數。所以也屬於只具有一個強制性引數的混合）的屬性被使用，第三個混合（有三個引數，第一個和第二個引數都沒有預設值，都是強制性引數，第三個引數有預設值，不是強制性引數，所以第三個混合屬於有兩個強制性引數的混合）的屬性不被使用。
再看下面的例子（當給第三個混合的第二個引數加上預設值時，那麼第三個混合也變成了只具有一個強制性引數的混合）
.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding:2; @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;
  color-3: #008000;
  padding-3: 2;
  margin: 2 2 2 2;
}
結果很明顯， 三個混合的屬性都被使用了。
再看下面的例子（第二個混合的兩個引數都沒有預設值，那麼第二個混合變成了有兩個強制性引數的混合）

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding) {
  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;
}
結果只有第一個混合的屬性被使用了。
Named Parameters（命名引數）
A mixin reference can supply parameters values by their names instead of just positions. Any parameter can be referenced by its name and they do not have to be in any special order:（混合引用能通過引數的名字來提供引數值，而不是僅僅依靠引數位置。任何引數都能通過他們的名字而被引用，而不是必須通過任何特殊的順序來引用）。
請看下面例子
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.box1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.box2 {
  .mixin(#efca44; @padding: 40px);
}
輸出為：

/* line 17, http://localhost/about-less/styles.less */
.box1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
/* line 20, http://localhost/about-less/styles.less */
.box2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}
注意：當定義混合時，把所有引數的預設值去掉後，如下使用，會有意外情況發生
.mixin(@color; @margin; @padding) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.box1 {
  .mixin(@margin: 20px; @color: #33acfe;20px;);
}
.box2 {
  .mixin(@margin: 40px;20px; #efca44);
}
輸出為：
/* line 6, http://localhost/about-less/styles.less */
.box1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
/* line 9, http://localhost/about-less/styles.less */
.box2 {
  color: 20px;
  margin: 40px;
  padding: #efca44;
}
在box2中，color和padding的值是反的，所以，在不適用引數名的情況下，less還是會按照引數位置來提供引數值。
The @arguments variable（@arguments變數）
@arguments has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful if you don't want to deal with individual parameters（@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;
}
Advanced arguments and the @rest variable（高階引數和@rest變數）
You can use ... if you want your mixin to take a variable number of arguments. Using this after a variable name will assign those arguments to the variable.（如果想要使混合有不確定數量的引數，那麼可以使用...。在一個變數名後使用...將會分配那些引數給這個變數）

.mixin(...) //接受n個引數
.mixin() //接受0個引數
.mixin(@a:1) //接受1個引數
.mixin(@a:1;...) //接受n個引數
.mixin(@a;...) //接受1-n個引數
.mixin(@color;@rest...) {
    //@rest 表示@color之後的所有引數
    //@arguments 表示所有引數
}
Pattern-matching（匹配模式）
當如下定義混合時
.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}
然後再如下這樣呼叫混合
@switch: light;
 
.class {
  .mixin(@switch; #888);
}
輸出結果為：
.class {
  color: #a2a2a2;
  display: block;
}
也可以像下面這樣定義混合
.mixin(@a) {
  color: @a;
}
.mixin(@a; @b) {
  color: fade(@a; @b);
}
當呼叫時，傳一個引數就呼叫上面的mixin，傳兩個引數則呼叫下面的mixin
--------------------- 
作者：MoLvSHan 
來源：CSDN 
原文：https://blog.csdn.net/molvshan/article/details/78487151 
版權宣告：本文為博主原創文章，轉載請附上博文連結！

轉載於：https://blog.csdn.net/molvshan/article/details/78487151