LESS - 多引數 Mixin

描述

引數可以使用逗號或分號分隔。使用逗號符號，您可以將其解釋為 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 多個引數：

<!doctype html>
   <head>
      <title>Mixin Multiple Parameters</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Multiple Parameters</h2>
      <p class = "myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

接下來，建立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.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示以下輸出。

less_parametric_mixins.htm

列印頁面