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

指南针确实有transform

的内置混音

我没有看到网站上记录的其他项目的mixins。如果您需要使用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;
}

Answer 2

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

@include transform(translateY(50px));

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

2 个答案: