Создание переходов переменных с Sass

Question

Есть ли способ, чтобы создать переменную для переходов в Sass, чтобы повторить это:

-webkit-transition: .2s; 
-moz-transition: .2s; 
-ms-transition: .2s; 
-o-transition: .2s; 
transition: .2s; 

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

Спасибо!

Answer 1

Вы можете создать mixin, который инкапсулирует, что:

@mixin transition($duration) { 
    -webkit-transition: $duration; 
    -moz-transition: $duration; 
    -ms-transition: $duration; 
    -o-transition: $duration; 
    transition: $duration; 
} 

Затем использовать его как это:

.class { @include transition(.2s); } 

Вы также можете посмотреть на Compass, которая включает в себя множество встроенных Mixins для CSS3, таких как transitions.

Кроме того, вы можете запустить свой CSS через Autoprefixer (после компиляции вашего Sass в CSS). Это плагин PostCSS (хотя вы также можете использовать use it via Gulp, Grunt, Webpack и многие другие инструменты сборки), который автоматически добавляет (и удаляет) необходимые префиксы поставщика, так что вам нужно только создать неповрежденный CSS. Вы можете настроить его, с помощью которого браузеры вы хотите поддерживать, и убедитесь, что все необходимые префиксы есть.

Answer 2

Вы также можете использовать переходных продолжительность подмешать http://compass-style.org/reference/compass/css3/transition/#mixin-transition-duration

a { 
    color:red; 
    @include transition-duration(.2s); 
    &:hover { 
    color:blue; 
    } 
}