Question

我试图瞄准转型＆＃39;使用SASS和Compass进行CSS3过渡的属性。这就是我想要的输出：

.panel { 
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
 }

首先我尝试使用标准Compass mixin和

@import "compass/css3/transition";
@include transition(transform 0.5s ease-in-out);

但是，CSS中的所有输出都是

transition: transform 0.5s ease-in-out;

...它还没有在浏览器中工作，因为它需要一个前缀。从2011年3月开始有一个bug report引用它，据说它已被修复。但是，呃，显然不是。所以，我决定自己动手，让我知道如何提交错误报告。

这就是我所说的：

@mixin transform-transition-mixin($duration, $easing) {

    -webkit-transition: transform $duration $easing;
    -moz-transition: transform $duration $easing;
    -o-transition: transform $duration $easing;
    transition: transform $duration $easing;

}

但是仍仅输出

transition: transform 0.5s ease-in-out;

奇怪的是，我决定删除最后一行，它开始工作 - 但没有默认值。相反，这就是我得到的：

-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: transform 0.5s ease-in-out;
-o-transition: transform 0.5s ease-in-out;

有人可以告诉我发生了什么，以及解决问题的最佳方法，而不仅仅是硬编码吗？

提前致谢。

Answer 1

这不是Sass或Compass的问题，它是Yeoman（或者可能只是Angular生成器）和/或Autoprefixer中的设置的问题。 Gruntfile中的深层是autoprefixer任务

autoprefixer: {
        options: {
            browsers: ['last 1 version']
        },
        dist: {
            files: [{
                expand: true,
                cwd: '.tmp/styles/',
                src: '{,*/}*.css',
                dest: '.tmp/styles/'
            }]
        }
    },

我通过运行

更新了Autoprefixer

> npm update autoprefixer

在终端

，然后将选项更改为

options: {
            browsers: ['last 5 versions']
        },

......现在它运作正常。

SASS / Compass转换属性mixin不使用transform，自定义版本不输出前缀

1 个答案: