SASS 相当于 LESS Space ("+_") 语法

Question

LESS 有一个很棒的小功能，叫做 Space这允许 mixins 将规则附加到现有属性。对于 transform() mixin 非常有用，因为您可以将许多转换规则附加到同一个属性，只需多次调用 mixin，例如。

例子:

.scale() {
  transform+_: scale(2);
}
.rotate() {
  transform+_: rotate(15deg);
}
.myclass {
  .scale();
  .rotate();
}

输出:

.myclass {
  transform: scale(2) rotate(15deg);
}

我正在尝试进入 SASS，但我不明白如何使用可用的语法来实现这一点。无论我做什么，输出都只应用其中一种转换，而不是两种转换。单独使用 SASS 实现这种行为的最佳方法是什么？

Answer 1

您可以在 mixin 中使用可变参数，如下所示:

@mixin transform($transforms...) {
  transform: $transforms;
}
.myclass {
  @include transform(scale(0.5) rotate(30deg));
}

这将输出:

.myclass {
  transform: scale(0.5) rotate(30deg);
}

你可以在这里看到一个工作示例:

http://codepen.io/sonnyprince/pen/RaMzgb

多一点信息:

Sometimes it makes sense for a mixin or function to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports “variable arguments,” which are arguments at the end of a mixin or function declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments, but are followed by ....

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments