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

Question

LESS has a large Space function that allows mixins to add rules to existing properties. Really useful for transform () mixins, because you can add many conversion rules to the same property simply by calling mixin several times, for example.

Example:

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

Outputs:

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

I am trying to enter SASS, but I do not understand how to achieve this with the syntax. Whatever I do, the output has only ever applied one of the transformations, and not both. What is the best way to achieve this behavior using only SASS?

Answer 1

You can use variable arguments in mixin like this:

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

this will output:

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

Here you can see a working example:

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

A bit more info:

It sometimes makes sense that a mixin or function takes an unknown number of arguments. For example, mixin for creating shadow shadows can take any number of shadows as arguments. For these situations, Sass supports “variable arguments,” which are arguments at the end of a mixin declaration or function that takes all remaining arguments and pack them as a list. These arguments look the same as regular arguments, but follow ....

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

Answer 2

Sass does not offer such a feature.

You can get close enough using global variables. However, each individual mix that you use, including third-party ones, must be changed to work in this way.

 // the setup $append-property-vals: (); // global variable $old-append-property-vals: (); // global variable @mixin append-property($key, $val, $separator: comma) { $old-val: map-get($append-property-vals, $key); @if $old-val { $append-property-vals: map-merge($append-property-vals, ($key: append($old-val, $val, $separator))) !global; } @else { $append-property-vals: map-merge($append-property-vals, ($key: $val)) !global; } } @mixin append-properties { // cache the original value $old-append-property-vals: $append-property-vals !global; @content; // write out the saved up properties @each $key, $val in $append-property-vals { #{$key}: $val; } // restore the original value $append-property-vals: $old-append-property-vals !global; } // modify the OP provided mixins to work @mixin scale { // if the vals should be comma delimited, write `comma` instead of `space` for the 3rd argument @include append-property(transform, scale(2), space); } @mixin rotate { @include append-property(transform, rotate(15deg), space); } // call the mixins .myclass { @include append-properties { @include scale; @include rotate; } } 

Output:

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