Sintassi SASS equivalente a spazio MENO ("+ _")

Question

LESS ha una piccola e fantastica funzionalità denominata Space che consente ai mixin di aggiungere regole alle proprietà esistenti. È davvero utile per i mixins(), perché è possibile aggiungere molte regole di trasformazione alla stessa proprietà, semplicemente chiamando il mixin più volte, ad es.

Esempio:

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

Uscite:

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

Sto cercando di entrare in SASS, ma non capisco come raggiungere questo obiettivo con la sintassi disponibili. Qualunque cosa io faccia, l'output applica solo una delle trasformazioni, non entrambe. Qual è il modo migliore per ottenere questo comportamento usando SASS da solo?

Answer 1

È possibile utilizzare argomenti variabili in un mixin in questo modo:

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

questa uscita volontà:

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

si può vedere un esempio di lavoro qui:

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

Un po 'di più informazioni:

A volte è logico che un mixin o una funzione prendano un numero sconosciuto di argomenti . Ad esempio, un mixin per creare ombre casella potrebbe richiedere un numero qualsiasi di ombre come argomenti. Per queste situazioni, Sass supporta "argomenti variabili", che sono argomenti alla fine di una dichiarazione di mixin o funzione che prende tutti gli argomenti avanzati e li raggruppa in un elenco. Questi argomenti sono proprio come normali argomenti, ma sono seguiti da ....

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

Answer 2

Sass non offre tale caratteristica.

È possibile ottenere ragionevolmente vicino utilizzando le variabili globali. Tuttavia, ogni singolo mix che utilizzi, inclusi quelli forniti da una terza parte, dovrà essere modificato per funzionare in questo modo.

// 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's 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; 
    } 
} 

uscita:

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