应用CSS技巧的Sass mixin
应用CSS技巧的Sass mixin
提问于 2020-03-08 00:32:36
我正在尝试创建在不同浏览器上应用CSS hack的mixin：
@mixin browsers($browsers) {
$selectors: (
chrome: '&:not(*:root)',
firefox: '@-moz-document url-prefix()',
ie: '@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)'
);
@each $browser in $browsers {
#{map-get($selectors, $browser)} {
@content;
}
}
}例如：
#test {
@include browsers(firefox ie) {
background: red;
}
}预期的编译输出为：
@-moz-document url-prefix() {
#test {
background: red;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#test {
background: red;
}
}但失败的原因是：
Error: expected selector.
@-moz-document url-prefix(){
^当然，我可以在@each中使用if/else语句，比如：
@if $browser == chrome {
&:not(*:root) {
@content;
}
} @else if $browser == firefox {
@-moz-document url-prefix() {
@content;
}
} @else if $browser == ie {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@content;
}
}但有没有可能做得更多...优雅？
Stack Overflow用户
发布于 2020-03-09 19:08:37
你忘了一个逗号。
#test {
@include browsers(firefox ie) {
background: red;
}
}应该是
#test {
@include browsers(firefox, ie) {
background: red;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60579774
复制相关文章
相似问题
腾讯云开发者
