Sass中的可变参数

SASS 中的可变参数和 LESS 中也一样，只不过由于 SASS 不是使用 JS 实现的，所以不能直接在混合中使用 arguments，必须通过 $args... 的格式来定义可变参数，然后通过 $args 来使用，注意点：和 LESS 一样可变参数必须写在形参列表的最后：

@mixin animate($name, $time, $mode, $delay) {
  transition: $name $time $mode $delay;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  @include animate(all, 4s, linear, 0s);
}

div:hover {
  width: 400px;
  height: 400px;
  background: blue;
}

• 通过 $args... 的格式来定义可变参数，然后通过 $args 来使用

@mixin animate($args...) {
  transition: $args;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  @include animate(all, 4s, linear, 0s);
}

div:hover {
  width: 400px;
  height: 400px;
  background: blue;
}

• 和 LESS 一样可变参数必须写在形参列表的最后

@mixin animate($name, $time, $args...) {
  transition: $name $time $args;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  @include animate(all, 4s, linear, 0s);
}

div:hover {
  width: 400px;
  height: 400px;
  background: blue;
}