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> <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。
@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 { background-color: #77C1EF; border: 2px solid black; width: 450px; }
让我们执行以下步骤,看看上面给出的代码如何工作: