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

Transition 并不是唯一需要前缀的属性。随着供应商添加支持，您可以停止包含前缀。如果您将 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-radius 编写一个@mixin，其中webkit 是您需要的唯一前缀。

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

Answer 2

您可以使用 unquote sass function 取消引用每个前缀。我的意思是：

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

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

Answer 3

在 Bourbon 中，你有类似的 mixin（顺便说一下，我建议在你需要很多类似的东西时使用它）：http://thoughtbot.com/bourbon/#transitions

及其代码：https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_transition-property-name.scss

在此基础上，你有或多或少的最优解。