@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;
 }

變量參數(shù)

可變參數(shù)用于任意數(shù)量的參數(shù)傳遞給混入。它包含傳遞給函數(shù)或混入關(guān)鍵字參數(shù)。傳遞給混入關(guān)鍵字參數(shù)可以使用關(guān)鍵字($args)函數(shù)返回映射到字符串值進行訪問。

例如，創(chuàng)建一個SASS文件，用下面的代碼：

@mixin colors($background) {
  background-color: $background;
}

$values: magenta, red, orange;
.container {
  @include colors($values...);
}

上面的代碼會編譯為CSS文件，如下所示：

.container {
  background-color: magenta;
}

示例

下面的例子演示了SCSS文件中的參數(shù)使用：

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>

接下來，創(chuàng)建文件argument.scss。

argument.scss

@mixin bordered($width: 2px) {
  background-color: #77C1EF;
  border: $width solid black;
  width: 450px;
}

.style  {
  @include bordered(2px);
}

你可以告訴SASS監(jiān)視文件，并隨時使用下面的命令更新SASS文件來修改CSS：

sass --watch C:\Ruby22-x64\argument.scss:argument.css

接著執(zhí)行上面的命令，它會自動創(chuàng)建argument.css文件，下面的代碼：

style.css

.style {
  background-color: #77C1EF;
  border: 2px solid black;
  width: 450px;
 }

輸出結(jié)果

讓我們來執(zhí)行以下步驟，看看上面的代碼工作：

保存上面的html代碼在argument.html文件。在瀏覽器中打開該HTML文件，得到輸出如下顯示。

上一篇：Sass括號混合下一篇：Sass through關(guān)鍵字

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Sass Mixin參數(shù)

關(guān)鍵字參數(shù)

變量參數(shù)

示例

argument.html

argument.scss

style.css

輸出結(jié)果