SASS 使用前缀简化 mixin [英] SASS simplify a mixin with prefixes

问题描述

有没有更简洁的方法来做到这一点?

Is there a cleaner way to do this?

@each $prefix in webkit moz ms o {

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

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

I hate redundancy and I would prefer if I could do it even simplier

编辑:

只是想清楚.我不是在寻找实现转换的方法，我想要的是更简单的代码.在我给你的例子中，我写了 2 倍的销售属性.我想优化这个.这是我要寻找的示例(但这不是有效的 SCSS)

Just to be clear. Im not looking for a method to implement transitions, what I want is a simplier code. In the example I give you see that I write 2 times the sale property. I would like to optimize this. Here an example of what I would be looking for (but this is NOT valid SCSS)

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

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

推荐答案

Transition 不是唯一需要前缀的属性.随着供应商添加支持，您可以停止包含前缀.如果您将 mixin 的每个部分都抽象化，那么从长远来看，您的代码将更易于维护.

Transition isn't the only property that needs prefixes. As vendors add support, you can stop including the prefixes. If you abstract each part of your mixin, your code will be more maintainable in the long run.

$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 是您唯一需要的前缀.

Now let's say you want to write a @mixin for border-radius where webkit is the only prefix you need.

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

这篇关于SASS 使用前缀简化 mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！