是否可以对特定于浏览器的 CSS 使用 mixin

我正在寻找一种使用 mixin 进行特定于浏览器的 CSS hack 的解决方案。 我正在使用 JavaScript 在 HTML 类中添加浏览器标签。喜欢.ie .ie7 .ie8 .ie9

我想使用 mixin 像：

.box-test {
margin: 10px;
@include browser(ie7) {
    margin: 20px;
    }
}

期望的输出：

.box-test {
margin: 10px;
}
.ie7 .box-test {
    margin: 20px;
    }

我尝试制作的mixin：

@mixin browser($browserVar) {
    @if $browserVar == ie7 {
    .ie7 { @content }
    }
    @else if $browserVar == ie8 {
    .ie8 { @content; }
         }
    @else if $browserVar == ie9 {
    .ie9 { @content; }
    }
}

问题是输出是：

.box-test {
    margin: 10px; }
.box-test .ie7 {
      margin: 20px; }

最简单的 mixin 是这样的：

@mixin legacy-ie($ver: 7) {
    .ie#{$ver} & {
        @content;
    }
}

Output:

.baz {
    background: #CCC;

    @include legacy-ie {
        background: black;
    }
}

如果您想发出同时适用于多个 IE 版本而不重复的样式，那么这将是一种方法：

$default-legacy-ie: 7 8 9 !default;

@mixin legacy-ie($versions: $default-legacy-ie) {
    $sel: ();
    @each $v in $versions {
        $sel: append($sel, unquote('.ie#{$v} &'), comma);
    }

    #{$sel} {
        @content;
    }
}

.foo {
    background: red;

    @include legacy-ie {
        background: green;
    }
}

.bar {
    background: yellow;

    @include legacy-ie(7 8) {
        background: orange;
    }
}

Output:

.foo {
  background: red;
}
.ie7 .foo, .ie8 .foo, .ie9 .foo {
  background: green;
}

.bar {
  background: yellow;
}
.ie7 .bar, .ie8 .bar {
  background: orange;
}

如果你希望能够抑制所有的 IE 混杂，你需要添加的是一个变量和一个@if block:

$enable-legacy-ie: true !default;

@mixin legacy-ie($ver: 7) {
    @if $enable-legacy-ie {
        .ie#{$ver} & {
            @content;
        }
    }
}

Set $enable-legacy-ie to false在文件顶部，如果您不想使用 IE 特定样式，请将其设置为true如果您确实想要包含样式。您可以轻松地编写一个反向 mixin 来隐藏旧 IE 无法使用的样式，以便 IE 特定文件保持良好且较小的状态。