SASS/SCSS объединить мульти-значения в пределах одного пункта

Question

У меня есть следующие mixin:

@mixin rhombus() { 
    @include transform(rotate(45deg)); 
} 

и еще один:

@mixin centerVertically() { 
    @include transform(transform(0, -50%)); 

    position: absolute; 
    top: -50% 
} 

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

Существует similar question для LESS, но не найдено ни одного решения для SASS.

Не придерживайтесь вышеуказанного кода, это всего лишь пример. Я не спрашиваю, как центрировать элемент или как его вращать; Я также знаю, что порядок трансформации может иметь значение, но все же существует ли способ слияния свойства transform?

EDIT

вопрос помечается как дубликат, но вопрос совершенно другой (и ответ не покрывает мой вопрос, а). Я спрашиваю о разделении свойств в пределах одного блока:

div { 
    @mixin rhombus; 
    @mixin centerVertically; 
} 

Прилагаемый вопрос задан вопрос о доступе к наследуемым свойствам и тому же свойство уровня. Мое дело другое, и я считаю, что ответ может быть другим. Я не ищу манипулирование унаследованным свойством. Я ищу способ объединить значения свойств в один. И я уже нашел ответ, хотя «дублирующий» вопрос не имеет того, который решает проблему.

Answer 1

Я провел некоторое исследование и нашел following feature request в репозитории SASS'es, который описывает именно этот случай.

Да, для SASS-wise нет хорошего решения. Но есть workaround by mahdaen, который может быть действительно полезен. Приведенный ниже код полностью принадлежащий this good guy

$tmp-box-shadow-value: none; 

@mixin box-shadow($value, $append: false) { 
    @if ($tmp-box-shadow-value == none) { 
     $tmp-box-shadow-value: $value !global; 
    } 
    @else { 
     $tmp-box-shadow-value: ($tmp-box-shadow-value, $value) !global; 
    } 

    @if ($append == false) { 
     @include prefixer(box-shadow, $tmp-box-shadow-value, true); 

     $tmp-box-shadow-value: none !global; 
    } 
} 

с использованием как

.shadow-elem { 
    // Appending values. 
    @include box-shadow(0 0 1px #ccc, true); 
    @include box-shadow(0 0 1px #ddd, true); 

    // Append and write the style. 
    @include box-shadow(0 0 1px #eee); 
} 

Хотя это может показаться грязным в чьих-то глазах, мне очень нравится, так как после небольшой она полностью регулировани решает мою проблему.