📅 最后修改于: 2020-12-25 04:17:21 🧑 作者: Mango
mixin参数是SassScript值，当包含mixin时将传递这些值并将其用作变量。
参数是定义混入时用逗号分隔的变量的名称。 Sass中有两种类型的mixin参数。
关键字参数用于包含在mixins中。它指定可以以任何顺序传递命名的参数，并且可以省略参数的默认值。
SCSS语法：
@mixin bordered($color, $width: 2px) {
color: #77C1EF;
border: $width solid black;
width: 500px;
}
.style {
@include bordered($color:#77C1EF, $width: 5px);
}
编译之后，您将获得以下CSS代码。
CSS：
.style {
color: #77C1EF;
border: 5px solid black;
width: 500px;
}
可变参数用于将任意数量的参数传递给mixin。当您要处理未知数量的参数时，将使用它。它包含传递给函数或mixin的关键字参数。可以使用keyword($ args)函数访问传递的关键字参数，该函数返回映射到String的值。
SCSS语法：
@mixin linear-gradient($direction, $gradients...) {
background-color: nth($gradients, 1);
background-image: linear-gradient($direction, $gradients...);
}
.selector {
@include linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple);
}
编译之后，您将获得以下CSS代码。
CSS：
.selector {
background-color: magenta;
background-image: linear-gradient(to right, magenta, red, orange, yellow, green, blue, purple); }