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

Question

我正在寻找一种解决方案，将 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; }

Answer 1

最简单的mixin应该是这样的:

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

输出:

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

输出:

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

在文件顶部将 $enable-legacy-ie 设置为 false 你不想拥有 IE 特定的样式，将其设置为 如果您确实想要包含样式，则为 true。您可以轻松编写一个反向混合来隐藏旧 IE 无法使用的样式，以便 IE 特定文件保持美观和小巧。