用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，它包含了许多CSS3的内置mixins，比如过渡。

或者，您可能希望通过Autoprefixer运行CSS(在将Sass编译为CSS之后)。这是一个PostCSS插件(尽管你也可以通过Gulp, Grunt, Webpack和许多其他构建工具使用它)，它会自动添加(和删除)必要的供应商前缀，所以你只需要编写无前缀的CSS。你可以用你想要支持的浏览器来配置它，它会确保所有需要的前缀都在那里。

Answer 2

你也可以使用transition-duration mixinhttp://compass-style.org/reference/compass/css3/transition/mixin-transition-duration

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