让 Compass 将供应商前缀添加到动画选择器

Question

谁能告诉我如何让 Compass 在编译时将供应商前缀添加到 CSS3 动画选择器？我的配置文件是这样的。

http_path = "/"
css_dir = "/"
sass_dir = "/"
images_dir = "img"
javascripts_dir = "js"

output_style = :expanded
relative_assets = true
line_comments = false

我尝试在其中添加Compass::BrowserSupport.add_support("animation", "webkit", "moz", "ms")，但它不起作用。

---

编辑

针对 cimmanon 的评论，我想避免像这样重复每个选择器：

.big-wheel {
    left: 77px;
    bottom: 11px;
    -webkit-transform: rotate(0deg);
    -webkit-animation-name: wheels;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-iteration-count: infinite;
    -moz-transform: rotate(0deg);
    -moz-animation-name: wheels;
    -moz-animation-duration: 0.25s;
    -moz-animation-iteration-count: infinite;
    -ms-transform: rotate(0deg);
    -ms-animation-name: wheels;
    -ms-animation-duration: 0.25s;
    -ms-animation-iteration-count: infinite;
    transform: rotate(0deg);
    animation-name: wheels;
    animation-duration: 0.25s;
    animation-iteration-count: infinite;
}

Answer 1

你可以试试Bourbon 这样的库。然后在您的 SCSS 文件中，您只需编写一个 include 语句，Bourbon 会在导出时为您生成所有前缀。

@include transform(translateY(50px));

Answer 2

Compass 确实有一个用于 transform 的内置 mixin

我没有看到网站上记录的其他项目的 mixin。如果您需要使用 experimental mixin，Compass 可以让您轻松编写自己的代码。

.foo {
    @include experimental('animation-name', wheels, webkit, moz, o, ms, not khtml);
    @include experimental('animation-duration', 0.25s, webkit, moz, o, ms, not khtml);
    // alternate way of setting prefixes
    $animation-support: webkit, moz, o, ms, not khtml;
    @include experimental('animation-iteration-count', infinite, $animation-support...);
}

编译为：

.foo {
  -webkit-animation-name: wheels;
  -moz-animation-name: wheels;
  -ms-animation-name: wheels;
  -o-animation-name: wheels;
  animation-name: wheels;
  -webkit-animation-duration: 0.25s;
  -moz-animation-duration: 0.25s;
  -ms-animation-duration: 0.25s;
  -o-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}