Less教學 » Less Mixins使用多引數

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 多個引數： 
<!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.htmll 檔案。
  • 在瀏覽器中開啟該HTML檔案，得到如下輸出顯示。