供应商特定属性的 SCSS 混合

Question

我正在编写一个 mixin 来处理特定于供应商的属性，但是我希望能够指定我想要支持的供应商。

我试过了...

@mixin vendor($attribute, $value, $vendors: (moz, ms, webkit)) {
    @each $vendor in $vendors {
        #{-$vendor -$attribute}: $value;
    }
    #{$attribute}: $value;
}

结果 CSS...

-moz-border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius: 12px;

我也试过了...

@mixin vendor($attribute, $value, $vendors: (moz, ms, webkit)) {
    @each $vendor in $vendors {
        #{$vendor -$attribute}: $value;
    }
    #{$attribute}: $value;
}

结果 CSS...

moz-border-radius: 12px;
ms-border-radius: 12px;
webkit-border-radius: 12px;

我做错了什么？

Answer 1

我更新了你的第二次尝试：

@mixin vendor($attribute, $value, $vendors: (moz, ms, webkit)) {
    @each $vendor in $vendors {
        -#{$vendor -$attribute}: $value;
    }
    #{$attribute}: $value;
}

所以我只是在#{$vendor -$attribute}之前添加了一个-。

供应商特定属性的 SCSS 混合

SCSS mixin for vendor specific attributes

css

sass

mixins