Less Mixins使用多參數

參數可以用逗號或者分號隔開。 使用逗號符號，你可以把它解釋爲 mixin 參數分離器或 CSS 列表分隔。如果你使用分號在 mixin 裏面，然後將其分開用分號和 CSS 參數將列出所有的逗號。

它包括分號和逗號某些方面，如下表所示：

• 如果有兩個參數，則它們將包含逗號分隔的列表。 例如 .class1(1, 2, 3; sometext, other thing).

• 如果有三個參數，僅包括數字，如 .class1(1, 2, 3).

• 可以使用虛擬分號包含逗號分隔的列表 .class1(1, 2, 3;).

• 有逗號分隔的默認值。 例如 .class1(@color: gray, green;)

語法

.mixin_name(@var_name1; @var_name2:some){
//code here
}

示例

下面的例子演示了Less文件中使用 mixin 多個參數：

Example of Mixin Multiple Parameters

LESS enables customizable, manageable and reusable style sheet for web site.

接下來，創建文件 style.less。

style.less

.mixin(@color) {
color: @color;
}
.mixin(@color; @padding: 2) {
color: @color;
padding: @padding;
}

.myclass {
.mixin(#FE9A2E);
}

你可以編譯 style.less 使用下面的命令來生成 style.css 文件：

lessc style.less style.css

接着執行上面的命令，它會自動創建 style.css 文件，下面的代碼：

style.css

.myclass {
color: #FE9A2E;
padding: 2;
}

輸出結果

讓我們來執行以下步驟，看看上面的代碼工作：

• 保存上面的HTML代碼在  **mixin_multiple_param******.htmll 文件。

• 在瀏覽器中打開該HTML文件，得到如下輸出顯示。

---