SassScript值可作為被傳遞時混入被包含,並且可作為混入變數中混入的參數。該參數是由逗號同時定義一個混合分離變數名稱。有兩種類型的參數如下:
-
關鍵字參數
-
變數參數
關鍵字參數
顯式關鍵字參數可用於混入包含。這被命名的參數可以以任何順序傳遞,並且可以使用默認參數的默認值。
例如,用下麵的代碼創建一個SASS檔:
@mixin bordered($color, $width: 2px) { color: #77C1EF; border: $width solid black; width: 450px; } .style { @include bordered($color:#77C1EF, $width: 2px); }
上面的代碼將被編譯到CSS檔,如下所示:
.style { color: #77C1EF; border: 2px solid black; width: 450px; }
變數參數
可變參數用於任意數量的參數傳遞給混入。它包含傳遞給函數或混入關鍵字參數。傳遞給混入關鍵字參數可以使用關鍵字($args)函數返回映射到字串值進行訪問。
例如,創建一個SASS檔,用下麵的代碼:
@mixin colors($background) { background-color: $background; } $values: magenta, red, orange; .container { @include colors($values...); }
上面的代碼會編譯為CSS檔,如下所示:
.container { background-color: magenta; }
示例
下麵的例子演示了SCSS檔中的參數使用:
argument.html
<html> <head><meta charset="utf-8"> <title>Sass Mixin 示例</title> <link rel="stylesheet" type="text/css" href="argument.css"/> </head> <body> <div class="style"> <h1>Example using arguments</h1> <p>Different Colors</p> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> </div> </body> </html>
接下來,創建檔argument.scss。
argument.scss
@mixin bordered($width: 2px) { background-color: #77C1EF; border: $width solid black; width: 450px; } .style { @include bordered(2px); }
你可以告訴SASS監視檔,並隨時使用下麵的命令更新SASS檔來修改CSS:
sass --watch C:\Ruby22-x64\argument.scss:argument.css
接著執行上面的命令,它會自動創建argument.css檔,下麵的代碼:
style.css
.style { background-color: #77C1EF; border: 2px solid black; width: 450px; }
輸出結果
讓我們來執行以下步驟,看看上面的代碼工作:
保存上面的html代碼在argument.html檔。在流覽器中打開該HTML檔,得到輸出如下顯示。

上一篇:
Sass包含mixin
下一篇:
傳遞內容塊到Mixin