应用CSS技术的Sass-mixin

我正在尝试创建mixin，它将CSS技术应用于不同的浏览器：

@mixin浏览器（$browsers）{
$selector：(
chrome:“&：非（*：根）”，
firefox:“@-moz文档url-prefix（）”，
ie:“@媒体屏幕和（-ms高对比度：活动），（-ms高对比度：无）”
);
@$browser中的每个$browser{
#{map get（$selectors，$browser）}{
@内容；
}
}
}

例如：

#测试{
@包括浏览器（firefox ie）{
背景：红色；
}
}

预期编译输出为：

@-moz文档url-prefix（）{
#试验{
背景：红色；
}
}
@媒体屏幕和（-ms高对比度：激活），（-ms高对比度：无）{
#试验{
背景：红色；
}
}

但它在以下方面失败了：

Error: expected selector.

@-moz-document url-prefix(){
^

当然，我可以在@each like中使用if/else语句：

@if$browser==chrome{
&：非（*：根）{
@内容；
}
}@else如果$browser==firefox{
@-moz文档url-前缀（）{
@内容；
}
}@else如果$browser==ie{
@媒体屏幕和（-ms高对比度：激活），（-ms高对比度：无）{
@内容；
}
}

但是有可能做得更多吗。。。优雅？

你忘了一个逗号

#test {
    @include browsers(firefox ie) {
        background: red;
    }
}

应该是

#test {
    @include browsers(firefox, ie) {
        background: red;
    }
}

你忘了一个逗号

#test {
    @include browsers(firefox ie) {
        background: red;
    }
}

应该是

#test {
    @include browsers(firefox, ie) {
        background: red;
    }
}

---

据我所知，你得到了你想要的。据我所知，你得到了你想要的。不，

firefox ie

正在解析为

$browsers

参数值。正如您所看到的，

@mixinbrowsers（$browsers）

只获取一个参数，然后在每个部分中解析它。您的代码将返回编译错误，如“参数数目错误（2代表1）”。否，

firefox ie

正在解析为

$browsers

参数值。正如您所看到的，

@mixinbrowsers（$browsers）

只获取一个参数，然后在每个部分中解析它。您的代码将返回编译错误，如“参数数目错误（2代表1）”。