如何使用带有 translateX 属性和 autoprefixer 的 compass transition mixins？

Question

问题： Compass 和我的 sass 变量 $property 不能正常工作，我不想使用 $property: all.

问题：

如何设置属性值，以便我的 compass mixin 能够正确转换 $property: translateX？

备注： 我有一个 grunt watch preforming compass 和 auto-prefixer on save with livereload

CSS:

.wa-carousel-animator {
$duration: 1s;
$property: translateX;
$function: ease-out;
$delay-on: 1s;
$delay-off: 0s;

@include single-transition($property, $duration, $function, $delay-off);
&.on-menu {
    @include single-transition($property, $duration, $function, $delay-on);
    @include breakpoint($baby){
        @include translateX(90%)
    }
    @include breakpoint($mobile){
        @include translateX(40%)
    }
    @include breakpoint($tablet){
        @include translateX(40%)
    }
    @include breakpoint($desktop){
        @include translateX(25%)
    }

}
}

Answer 1

如果您使用的是 autoprefixer，则无需使用 Compass 的内置过渡混音（因为它们真正做的只是应用浏览器前缀）。您还有问题，因为 translateX 不是属性 - transform 是，而 translateX 是属性.

的值

您可以将过渡细节保留为一个变量，但除非您需要将它的不同部分分开以供其他地方使用，否则不妨为自己节省一些复杂性，然后将它们组合起来：

$transition-default: transform 1s ease-out 1s;

transition: $transition-default;

  &.on-menu {
    transition-delay: 0s;

     @include breakpoint($baby) {
        transform: translateX(90%);
    }
  ....

等等。 Autoprefixer 将处理您尝试使用 Compass 的所有浏览器前缀。

如何使用带有 translateX 属性和 autoprefixer 的 compass transition mixins？

How to use the compass transition mixins with a translateX property and autoprefixer?

css

sass

autoprefixer

compass