Sass Mixin引數 - tw511教學網

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檔案，得到輸出如下顯示。