Question

有没有更干净的方法来做这个?

@each $prefix in webkit moz ms o {

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

我讨厌冗余,我更希望我能做得更简单

<强度 > EDIT :

仅澄清一点。我不是在寻找一个执行过渡的方法, 我想要的是一个简单化的代码。在我给您举的例子中, 我可以看到我写了2倍的销售产权。我想优化它。这里的示例是我要寻找的东西( 但 < 坚固 > 这是无效的 SCSS < / 坚固 > ) 。

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

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

Answer 1

过渡不是唯一需要前缀的属性。随着供应商添加支持, 您可以停止包含前缀。如果您抽象了组合中的每一个部分, 您的代码将长期更可维持。

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

现在让我们来表示您想要为 边界- radius 写入一个@ mixin, 在那里, webkit 是您唯一需要的前缀。



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

Answer 2

您可以使用 unquote 来取消每个前缀的引用。我的意思是:

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

我认为,这是实现这一目的的更清洁的方法。

Answer 3

在波旁有类似混合的混合物(顺便说一下,我建议当你需要很多类似的东西时使用):http://thisbot.com/bourbon/#过渡性

其代码:https://github.com/thisbot/bourbon/blob/master/app/assets/stypeshes/wopes/_过渡-property-name.scss

在此基础上,你或多或少有最佳解决办法。

友情链接