Browser 是否可以将mixin用于特定于浏览器的CSS

我正在寻找一种解决方案，使用mixin进行特定于浏览器的CSS攻击。 我正在使用JavaScript在HTML类中添加浏览器标记。比如

.ie.ie7.ie8.ie9

我想使用mixin，比如：

.box测试{
利润率：10px；
@包括浏览器（ie7）{
利润率：20px；
}
}

期望输出：

.box测试{
利润率：10px；
}
.ie7.盒子测试{
利润率：20px；
}

我试图制作的混音：

@mixin浏览器（$browserVar）{
@如果$browserVar==ie7{
.ie7{@content}
}
@如果$browserVar==ie8，则为else{
.ie8{@content；}
}
@如果$browserVar==ie9，则为else{
.ie9{@content；}
}
}

问题是输出是：

.box测试{
边距：10px；}
.盒子测试.ie7{
边距：20px；}

你把事情复杂化了。：）可以这么简单：

.box-test {
  margin: 10px;

  .ie-7 & {
    margin: 20px; } }

结果:

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

---

绝对最简单的mixin是这样的：

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

输出：

.baz {
    background: #CCC;

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

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

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

如果您希望一次发出适用于多个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;
    }
}

输出：

.baz {
    background: #CCC;

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

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

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

如果希望能够抑制所有IE kludges，则只需添加一个变量和一个

@If

块：

$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特定的文件保持美观和小。

我曾尝试为“@-moz document url-prefix（）”FF hack添加混合，但它未被SASS识别，并且SASS抛出了错误。因此，我认为更好的解决方案是创建_hack.sass文件，并添加css hack，而这些不会由sass编译。我会在需要的时候包括这个文件

@输入“黑客”

---

我添加了这个答案，因为我觉得它对那些正在努力让mozilla/safari破解工作的人很有用。

就我个人而言，我更喜欢使用mixin而不是简单地写出选择器，因为我希望能够生成单独的CSS文件：一个没有所有丑陋的IE棍棒，另一个有。一个mixin可以让你很容易地做到这一点，而手工写出选择器则不行。哇，这是一个非常好的解决方案！谢谢！也许你也能为我的rtl问题找到一个解决方案。