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

Question

LESS有一个很小的功能叫做Space,允许mixin将规则附加到现有属性上.对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 中使用变量参数，如下所示：

\n\n

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

\n\n

这将输出：

\n\n

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

\n\n

您可以在此处查看一个工作示例：

\n\n

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

\n\n

更多信息：

\n\n

\n

有时，mixin 或函数采用未知数量的参数是有意义的。例如，用于创建盒子阴影的 mixin 可能采用任意数量的阴影作为参数。对于这些情况，Sass 支持 xe2x80x9c 变量参数，xe2x80x9d 是 mixin 或函数声明末尾的参数，它们采用所有剩余参数并将它们打包为列表。这些参数看起来就像普通的参数，但后面跟着 ....

\n

\n\n

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

\n