使用 Sass 创建转换变量答案

【问题标题】：Create transitions variable with Sass使用 Sass 创建转换变量
【发布时间】：2013-03-11 14:12:42
【问题描述】：

有没有办法在 Sass 中为转换创建一个变量来复制这个：

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

我刚刚开始接触 Sass，我正在使用 CodeKit 进行编译。

谢谢！

【问题讨论】：

标签： css sass css-transitions codekit

【解决方案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 的内置 mixin，例如 transitions。

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

【讨论】：

太棒了，谢谢！（我之前确实有过另一条评论，但我只是尝试过它，它确实有效......不需要）

【解决方案2】：

您也可以使用 transition-duration 混合 http://compass-style.org/reference/compass/css3/transition/#mixin-transition-duration

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

【讨论】：