Sass - 混合宏引數

描述

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

變數引數

變數引數用於向混合宏傳遞任意數量的引數。它包含傳遞給函式或混合宏的關鍵字引數。傳遞給混合宏的關鍵字引數可以使用 `keywords($args)` 函式訪問，該函式返回對映到字串的值。

例如，建立一個包含以下程式碼的 SASS 檔案：

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

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

以上程式碼將編譯成如下所示的 CSS 檔案：

.container {
   background-color: magenta;
}

示例

以下示例演示了在 SCSS 檔案中使用引數：

argument.htm

<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 檔案，將顯示如下所示的輸出。

sass_mixin_directives.htm

列印頁面