创建过渡与萨斯

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