帶參數的mixin

在Less中，還可以像函數一樣定義一個帶參數的mixin, 這種形式叫做 Parametric Mixin，即帶參數的混入。如：

1. // 定義一個樣式選擇器
2. .borderRadius(@radius){
3. border-radius: @radius;
4. }

然後，在其他選擇器中像這樣調用它：

1. // 使用已定義的樣式選擇器
2. #header {
3. .borderRadius(10px); // 把 10px 作為參數傳遞給樣式選擇器
4. }
5. .btn {
6. .borderRadius(3px); // 把 3px 作為參數傳遞給樣式選擇器
7. }

編譯後的CSS代碼為：

1. #header {
2. border-radius: 10px;
3. }
4. .btn {
5. border-radius: 3px;
6. }

還可以給 Mixin 的參數設置默認值，有了默認值，在調用它的時候，如果沒有提供該參數，它就會使用默認值。比如，設置默認值為 5px：

1. .borderRadius(@radius:5px){
2. border-radius: @radius;
3. }
4. .btn {
5. .borderRadius;
6. }

由於在調用 .borderRadius 時沒有傳遞參數，它就會使用默認值 5px。編譯後的CSS代碼為：

1. .btn {
2. border-radius: 5px;
3. }

Mixin還可以帶多個參數，參數之間使用逗號或分號隔開。如：

1. .border(@width, @style, @color) {
2. border: @width @style @color;
3. }
4. h2 {
5. .border(2px, dashed, green);
6. }

編譯後的CSS代碼為：

1. h2 {
2. border: 2px dashed #008000;
3. }

雖然多個參數可以使用分號或者逗號分隔，推薦使用分號分隔，因為逗號既可以表示混合的參數，也可以表示一個參數中一組值的分隔符。

使用分號作為參數分隔符，就意味著可以將逗號分隔的一組值作為一個變量處理。換句話說，如果編譯器在混入的定義或者調用中找到至少一個分號，就會假設參數是使用分號分隔的，則逗號將被看作是一個參數中一組值的分隔符。如：

.name(1, 2, 3; 4, 5) 就包含2個參數，1, 2, 3是一個參數，4, 5是一個參數。每個參數都是通過逗號分隔的一組值。

.name(1, 2, 3) 就包含3個參數，每個參數只含一個數字。也可以使用一個象征性的分號，如 .name(1, 2, 3;)，就可以創建一個只含一個參數，但參數包含一組值的混入。

當包含多個參數時，Mixins是通過參數的名稱，而不是位置來引用參數。也就是說，在使用的時候，如果提供參數名稱，則參數的順序並不重要。命名參數使代碼更清晰、更容易閱讀。如：

1. .mixin(@color: black, @fontSize: 10px) {
2. color: @color;
3. font-size: @fontSize;
4. }
5. .class1 {
6. .mixin(@fontSize: 20px, @color: #F5A9D0);
7. }
8. .class2 {
9. .mixin(#F79F81, @fontSize: 20px);
10. }

編譯後的CSS代碼為：

1. .class1 {
2. color: #f5a9d0;
3. font-size: 20px;
4. }
5. .class2 {
6. color: #f79f81;
7. font-size: 20px;
8. }

除此之外，像 JavaScript 中 arguments一樣，Mixin 也有這樣一個變量：@arguments。當 Mixin 引用這個參數時，它表示傳遞進來的所有參數。

很多情況下，@arguments參數可以省去很多代碼。比如，在定義 box-shadow 的屬性值時，如果不想單獨處理每一個參數的話，就可以像這樣寫：

1. .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
2. box-shadow: @arguments;
3. }
4. #header {
5. .boxShadow(2px,2px,3px,#f36);
6. }

編譯後的CSS代碼為：

1. #header {
2. box-shadow: 2px 2px 3px #f36;
3. }

如果需要在 mixin 中不限制參數的數量，就可以在變量名後添加“...”，表示這裏可以使用可變參數。這一點跟C語言比較類似。請看以下簡單實例：

對於某些屬性，它的參數個數是不確定的，而具體的參數個數，只有在使用的時候才知道，這種情況就適合使用可變參數。比如，padding 屬性可以接受1個、或2個、或3個、或4個參數，就可以使用可變參數。Less代碼如下：

1. .padding(...) {
2. padding: @arguments;
3. }
4. .class1 {
5. .padding(20px);
6. }
7. .class2 {
8. .padding(20px 30px);
9. }
10. .class3 {
11. .padding(20px 30px 40px);
12. }
13. .class4 {
14. .padding(20px 30px 40px 50px);
15. }
16. 編譯後的C

SS代碼為：

1. .class1 {
2. padding: 20px;
3. }
4. .class2 {
5. padding: 20px 30px;
6. }
7. .class3 {
8. padding: 20px 30px 40px;
9. }
10. .class4 {
11. padding: 20px 30px 40px 50px;
12. }

可變參數的常見形式如下：

.mixin(...) { } // it matches arguments from 0-n

.mixin() { } // it matches exactly 0 arguments

.mixin(@x: 1) { } // it matches arguments from 0-1

.mixin(@x: 1, ...) { } // it matches arguments from 0-n

帶參數的Mixin