0

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

问题：

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

笔记： 我有一个 grunt watch 执行指南针和自动前缀保存与 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%)
    }

}
}
4

1 回答 1

1

如果您使用自动前缀，则不需要使用 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 的所有浏览器前缀。

于 2015-01-05T21:42:48.353 回答