应用 CSS hack 的 Sass mixin

Question

我正在尝试创建适用于不同浏览器的 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;
    }
}

但是否有可能做得更...优雅？

Answer 1

你忘记了一个逗号。

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

应该是

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