供应商特定属性的 SCSS mixin答案

【问题标题】：SCSS mixin for vendor specific attributes供应商特定属性的 SCSS mixin
【发布时间】：2016-07-20 20:25:05
【问题描述】：

我正在编写一个 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;

我做错了什么？

【问题讨论】：

要么我疯了，要么你展示的第二个例子对你有用？
@elad.chen 它们应该以 -like、-moz-border-radius、-webkit-border-radius 为前缀。第一个示例包含前缀，第二个示例包含供应商。我需要两者的结合。
哎呀，我疯了。
@elad.chen 别担心我的朋友，很容易错过。 :-)

标签： css sass mixins

【解决方案1】：

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

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

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

【讨论】：

啊，知道怎么做就简单了！谢谢！