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

在波本威士忌，有像你一样的混音（顺便提一下，我建议你在需要很多类似的东西时使用它）：http://thoughtbot.com/bourbon/#transitions

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

在此基础上，您可以获得或多或少的最佳解决方案。

SASS简化了带前缀的mixin

3 个答案: