SASS, эквивалентный синтаксису LESS Space ("+ _")

Question

LESS имеет небольшую функцию, называемую Space, которая позволяет mixins добавлять правила к существующим свойствам. На самом деле полезно для transform() mixins, потому что вы можете добавить много правил преобразования в одно и то же свойство, просто позвонив mixin несколько раз, например.

Пример:

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

Выходы:

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

Я пытаюсь попасть в SASS, но я не понимаю, как добиться этого доступного синтаксиса. Что бы я ни делал, выход только когда-либо применял одно из преобразований, а не то, и другое. Каков наилучший способ добиться такого поведения, используя только САСС?

Answer 1

Вы можете использовать переменные аргументы в Mixin так:

@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 или функции взять неизвестное количество аргументов. Например, mixin для создания теней полей может принимать любое количество теней в качестве аргументов. В этих ситуациях Sass поддерживает «переменные аргументы», которые являются аргументами в конце объявлением mixin или функции, которое принимает все оставшиеся аргументы и упаковывает их в список. Эти аргументы выглядят так же, как обычные аргументы, но следуют ....

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

Answer 2

Sass не предлагает такую ​​возможность.

Вы можете получить достаточно близко, используя глобальные переменные. Тем не менее, каждый отдельный микс, который вы используете, в том числе и сторонние, должен быть изменен для работы таким образом.

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