編程教程Sass Mixin參數
描述
SassScript值可以作為mixin中的參數，當mixin包含在mixin中時可以作為變量傳遞。參數是一個變量的名稱，在定義mixin時用逗號分隔。有兩種類型的參數，如:
關鍵字參數
可變參數
關鍵字參數
顯式關鍵字參數可以用于包含在mixin中。命名的參數可以按任何順序傳遞，參數的默認值可以省略。
例如，使用以下代碼創建一個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;
}可變參數
變量參數用于將任意數量的參數傳遞給mixin。它包含傳遞給函數或mixin的關鍵字參數。傳遞給mixin的關鍵字參數可以使用關鍵字（$ args）函數進行訪問，該函數返回映射到String的值。
例如，使用以下代碼創建一個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> <title> Mixin example of sass</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:\ruby\lib\sass\argument.scss:argument.css
接下來執行上面的命令，它將使用下面的代碼自動創建argument.css文件:
style.css
.style {
background-color: #77C1EF;
border: 2px solid black;
width: 450px;
}輸出
讓我們執行以下步驟，看看上面的代碼如何工作:
將上述html代碼保存在argument.htm文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
