Sass mixin, который применяет CSS хаков - PullRequest
Новая
       59

Sass mixin, который применяет CSS хаков

1 голос
/ 07 марта 2020

Я пытаюсь создать миксин, который применяет CSS хаки для разных браузеров: 

@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(){
^

Конечно, я могу использовать операторы if / else внутри @each вроде: 

@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;
    }
}

, но возможно ли это сделать более ... элегантно?

1 Ответ

0 голосов
/ 09 марта 2020

Вы забыли запятую. 

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

должно быть 

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