3

谁能告诉我如何让 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;
}
4

2 回答 2

2

Compass 确实有一个用于转换的内置 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;
}
于 2013-07-12T17:51:41.790 回答
-1

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

@include transform(translateY(50px));
于 2013-07-12T17:43:39.237 回答