創建過渡與薩斯

Question

變量有沒有一種方法來創建在薩斯過渡到複製這個變量：

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

我剛開始我的腳溼用無禮的話，我用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，其中包括許多內置混入爲CSS3的東西，如transitions。

或者，您可能想通過Autoprefixer運行您的CSS（將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; 
    } 
}