Sass：Mixin参数

描述

SassScript值可以用作mixin中的参数，当包含mixin时将传递这些值，并且可以在mixin中将其用作变量。参数是变量的名称，在定义mixin时用逗号分隔。有两种类型的参数，例如：

关键字参数
可变参数

关键字参数

显式关键字参数可用于包含在mixins中。可以以任意顺序传递已命名的参数，并且可以省略参数的默认值。

例如，使用以下代码创建一个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;
}

可变参数

可变参数用于将任意数量的参数传递给mixin。它包含传递给函数或mixin的关键字参数。传递给mixin的关键字参数可以使用keyword($ args)函数访问，该函数返回映射到String的值。

例如，使用以下代码创建一个SASS文件：

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

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

上面的代码将被编译为CSS文件，如下所示：

.container {
   background-color: magenta;
}

例

以下示例演示了SCSS文件中参数的用法：

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>

接下来，创建文件arguments.scss。

arguments.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

接下来，执行以上命令；它将使用以下代码自动创建arguments.css文件。

style.css

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

输出量

让我们执行以下步骤，看看上面给出的代码如何工作：

将上面给定的html代码保存在arguments.htm文件中。
在浏览器中打开此HTML文件。

作者：terry，如若转载，请注明出处：https://www.web176.com/sass/1684.html