Question

我正在寻找一种解决方案，将mixin用于特定于浏览器的CSS黑客攻击。我使用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 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 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 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。您可以轻松编写反向mixin来隐藏旧IE无法使用的样式，以便IE特定文件保持良好和小巧。

Answer 2

你的事情太复杂了。 :)它可以这么简单：

.box-test {
  margin: 10px;

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

结果：

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

Answer 3

我已经尝试添加mixin用于“@ -moz-document url-prefix（）”FF hack但是它没有被SASS识别并且SASS抛出了错误。所以我认为更好的解决方案是创建_hack.sass文件并添加不会被SASS编译的css hacks。我会在需要时包含此文件。

@import“hack”;

我正在添加答案，因为我认为对于那些正在努力让mozilla / safari hack工作的人会有用。

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

3 个答案: