LESS Space（ "+ _"）構文に相当するSASS

Question

LESSには、mixinsが既存のプロパティにルールを追加できるようにする、Spaceという小さな機能があります。 transformin（）mixinsには本当に便利です。mixinを複数回呼び出すだけで、同じプロパティに多くの変換ルールを追加できます。

例：

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

出力：

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

私はSASSに取得しようとしているが、私は可能な構文でこれを実現する方法を理解していません。私が何をしても、出力は変換の1つだけを適用し、両方を適用することはありません。 SASSだけでこの動作を達成する最善の方法は何ですか？

Answer 1

あなたはそうのようにミックスインで変数の引数を使用することができます。

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

この意志出力：

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

：

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

はあなたがここで働くの例を見ることができますもう少し詳しく：

mixinや関数が未知数の引数をとることがあることが時々あります。 引数の数。例えば、ボックスシャドウ を作成するためのミックスインは、引数として任意の数のシャドウを取ります。これらの状況では、 Sassは の最後の引数であり、残りの引数をすべて取り、リストとしてそれらをパッケージ化するmixinまたは関数宣言をサポートしています。これらの引数は、普通 引数のように見えますが、続いている....

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

Answer 2

サスは、このような機能を提供していません。

グローバル変数を使用することで、合理的に近い値を得ることができます。しかし、サードパーティが提供するものを含め、使用しているすべてのシングルミックスは、このように動作するように変更する必要があります。

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

出力：

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