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');
}

现在让我们假设你想写一个@mixin,border-radius它webkit是你需要的唯一前缀.

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