获取指南针以向动画选择器添加供应商前缀 [英] Getting Compass to add vendor prefixes to animation selectors

问题描述

任何人都可以告诉我如何让Compass在CSS3动画选择器编译时添加供应商前缀？我的配置文件看起来像这样。

Can anyone tell me how I can get Compass to add the vendor prefixes to CSS3 animation selectors when it compiles? My config file looks like this.

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），但不起作用。

I've tried adding Compass::BrowserSupport.add_support("animation", "webkit", "moz", "ms") to it, but it doesn't work.

编辑

为了回应cimmanon的意见，我想避免重复每个选择器，如下：

In response to cimmanon's comment, I wanted to avoid having to repeat every selector like this:

.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;
}

推荐答案

Compass有内置mixin for 转换

Compass does have a built in mixin for transform

我没有看到mixins的网站上记录的其他项目。如果您需要使用 指南针，您可以轻松编写自己的指南针。实验 mixin 。

I don't see mixins for the other items documented on the website. Compass makes it easy to write your own if you need to using the experimental mixin.

.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;
}

这篇关于获取指南针以向动画选择器添加供应商前缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！