Sass Mixin參數

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

Sass Mixin 示例

Example using arguments

Different Colors

  • Red
  • Green
  • Blue

接下來,創建文件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