SASS mix для анимации CSS

Question

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

Я пытаюсь создать базовое смешивание для свойства transition, которое будет включать резервные копии для старых браузеров с префиксами.

Я пытался использовать что-то вроде этого:

@mixin transition($property, $duration, $timing-function, $delay) { 
    -webkit-transition: $property, $duration, $timing-function, $delay; 
    -moz-transition: $property, $duration, $timing-function, $delay; 
    -o-transition: $property, $duration, $timing-function, $delay; 
    transition: $property, $duration, $timing-function, $delay; 
} 

Но это, очевидно, не дает префиксы, так что я пытался сделать что-то вроде -webkit-transition: -webkit-$property, $duration, $timing-function, $delay;, но это, кажется, не работает.

Как я могу создать смешивание с префиксами поставщика в переменной?

Answer 1

Я закончил с использованием @if утверждений в моем миксине, как описано in this answer.

В моем конкретном случае я беспокоился о собственности transform, и, поскольку на этот вопрос ответит вопрос, мне больше не нужны все предыдущие префиксы поставщика; just -webkit.

Вот Mixin:

@mixin transition($property, $duration, $timing-function, $delay) { 
    @if ($property == 'transform') { 
    -webkit-transition: -webkit-transform $duration $timing-function $delay; 
    transition: -webkit-transform $duration $timing-function $delay; 
    transition: transform $duration $timing-function $delay; 
    transition: transform $duration $timing-function $delay, -webkit-transform $duration $timing-function $delay; 
    } @else { 
    -webkit-transition: $property $duration $timing-function $delay; 
    transition: $property $duration $timing-function, $delay; 
    } 
} 

Используя это следующим образом:

div { 
    color: red; 
    @include transition(transform, 500ms, ease, 0); 
} 

будет компилировать к этому:

div { 
    color: red; 
    -webkit-transition: -webkit-transform 500ms ease 0; 
    transition: -webkit-transform 500ms ease 0; 
    transition: transform 500ms ease 0; 
    transition: transform 500ms ease 0, -webkit-transform 500ms ease 0; 
} 

Answer 2

Вместо использования

-webkit-transition: -webkit-$property, $duration, $timing-function, $delay;,

попробовать

-webkit-transition: unquote('-webkit-' + $property) , $duration, $timing-function, $delay;

Но в этом случае, вы действительно лучше использовать Compass, который имеет некоторые очень хорошо написаны Примеси для общего таких случаев.