閱讀(4.7k) 書簽贊(0) 我要糾錯

Sass Mixin參數(shù)

2018-12-30 15:54 更新

描述

SassScript值可以作為mixin中的參數(shù)，當mixin包含在mixin中時可以作為變量傳遞。參數(shù)是一個變量的名稱，在定義mixin時用逗號分隔。有兩種類型的參數(shù)，如:

關鍵字參數(shù)
可變參數(shù)

關鍵字參數(shù)

顯式關鍵字參數(shù)可以用于包含在mixin中。命名的參數(shù)可以按任何順序傳遞，參數(shù)的默認值可以省略。

例如，使用以下代碼創(chuàng)建一個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;
 }

可變參數(shù)

變量參數(shù)用于將任意數(shù)量的參數(shù)傳遞給mixin。它包含傳遞給函數(shù)或mixin的關鍵字參數(shù)。傳遞給mixin的關鍵字參數(shù)可以使用關鍵字（$ args）函數(shù)進行訪問，該函數(shù)返回映射到String的值。

例如，使用以下代碼創(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>
   <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>

接下來，創(chuàng)建文件 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

接下來執(zhí)行上面的命令，它將使用下面的代碼自動創(chuàng)建 argument.css 文件:

style.css

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

輸出

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

將上述html代碼保存在 argument.htm 文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。

以上內容是否對您有幫助：

寫筆記

我要補充