SASS相當於LESS空間（「+ _」）的語法

Question

LESS有一個很好的小功能Space，它允許mixin將規則附加到現有屬性。對transform（）mixins非常有用，因爲您可以將多個轉換規則附加到同一個屬性，只需調用mixin多次，例如。

例子：

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

輸出：

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

我試圖進入SASS，但我不明白如何與現有的語法來實現這一目標。無論我做什麼，輸出都只應用其中一種轉換，而不是兩種。單獨使用SASS實現這種行爲的最佳方法是什麼？

Answer 1

您可以在一個混合使用可變參數，像這樣：

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

這將輸出：

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

這裏你可以看到一個工作示例：

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

更多信息：

有時候mixin或者函數有一個未知的參數數量是有意義的。例如，用於創建陰影框 的混合可能會將任意數量的陰影作爲參數。對於這些情況，Sass支持「可變參數」，它們是 末尾的參數，該混合或函數聲明將所有剩餘參數和 打包爲一個列表。這些論點看起來就像正常 參數，但之後....

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