SASS equivalent to LESS Space ("+_") syntax

Question

LESS has a great little feature called Space that allows mixins to append rules to existing properties. Really useful for transform() mixins, because you can append many transform rules to the same property, just by calling the mixin multiple times, eg.

Example:

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

Outputs:

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

I'm trying to get into SASS, but I don't understand how to achieve this with the available syntax. Whatever I do, the output only ever applies one of the transformations, not both. What is the best way to achieve this behaviour using SASS alone?

Answer 1

You can use variable arguments in a mixin like so:

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

this will output:

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

You can see a working example here:

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

A little more info:

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