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

打印页面