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

Question

问题:Compass 和我的 sass 变量 $property 无法正常工作，我不想使用 $property: all。

问题:

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

注释:我有一个正在使用 livereload 保存的 grunt watch 预制 compass 和自动前缀器

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 的所有浏览器前缀。