是否可以对特定于浏览器的 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

我尝试为“@-moz-document url-prefix()”FF hack 添加 mixin，但 SASS 无法识别它，并且 SASS 抛出错误。所以我认为更好的解决方案是创建 _hack.sass 文件并添加不会由 SASS 编译的 css hack。我会在需要时包含此文件。

@import "hack";

我正在添加这个答案，因为我觉得这对正在努力获得 mozilla/safari hack 作品的人很有用。

Answer 2

最简单的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 块：

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

Answer 3

你把事情复杂化了。 :) 就这么简单：

.box-test {
  margin: 10px;

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

结果：

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