sass - SASS 使用前缀简化 mixin

Question

有没有更清洁的方法来做到这一点？

@each $prefix in webkit moz ms o {

    -#{$prefix}-transition: all 1s linear;
}
transition: all 1s linear;

我讨厌冗余，如果我能做得更简单，我更愿意

编辑：

只是要清楚。我不是在寻找实现转换的方法，我想要的是更简单的代码。在我给你的例子中，我写了 2 倍的销售属性。我想对此进行优化。这是我要查找的示例（但这不是有效的 SCSS）

@each $prefix in "-webkit-", "-moz-", "-ms-", "-o-", "" {

    #{$prefix}transition: all 1s linear;
}

Answer 1

转换不是唯一需要前缀的属性。随着供应商添加支持，您可以停止包含前缀。如果你对 mixin 的每个部分进行抽象，从长远来看，你的代码将更易于维护。

$default-prefixes: webkit moz ms o;

@mixin build-prefix-values($property, $value, $prefixes: $default-prefixes) {
    @each $prefix in $prefixes {
        -#{$prefix}-#{$property}: #{$value};
    }
    #{$property}: #{$value};
} 

@mixin transition($property: all, $delay: 1s, $timing: linear) {
    $value: $property $delay $timing;
    // use default prefixes
    @include build-prefix-values('transition', $value);
}

// using defaults of 'all' '1s' and 'linear'
p {
    @include transition();
}

// using custom values
.fast {
    @include transition('height', '.1s', 'ease', '0');
}

现在假设您想为border-radiuswherewebkit是您需要的唯一前缀编写一个 @mixin。

@mixin border-radius($radius) {
    $prefixes: webkit;
    @include build-prefix-values('border-radius', $radius, $prefixes);
}

Answer 2

您可以使用unquote sass 函数取消引用每个前缀。我是说：

@each $prefix in "-webkit-", "-moz-", "-ms-", "-o-", "" {
    #{unquote($prefix)}transition: all 1s linear;
}

我认为这是实现它的更清洁的方法。

Answer 3

In Bourbon there are mixin like that you have (by the way, I recommend to use it when you need a lot of similar things): http://thoughtbot.com/bourbon/#transitions

And its code: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_transition-property-name.scss

On this basis, you have more or less optimal solution.