Sass mixin参数

本文概述

• 关键字参数
• 可变参数

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