是否有可能使用一个mixin针对特定浏览器CSS [英] Is it possible to use a mixin for browser-specific CSS

问题描述

我正在寻找使用一个mixin特定浏览器的CSS黑客的解决方案。
我使用JavaScript来添加浏览器标签中的HTML类。像 .IE .ie7 .ie8 .ie9

我想用类似的mixin：

.box的测试{
保证金：10px的;
@include浏览器（IE7）{
    保证金：20像素;
    }
}


所需的输出：

.box的测试{
保证金：10px的;
}
.ie7 .box的测试{
    保证金：20像素;
    }


我试过混入，使：

@mixin浏览器（$ browserVar）{
    @if $ browserVar == {IE7
    .ie7 {} @content
    }
    @else如果$ browserVar == {IE8
    .ie8 {@content; }
         }
    @else如果$ browserVar == {IE9
    .ie9 {@content; }
    }
}


问题是输出：

.box的测试{
    保证金：10px的; }
.box的测试.ie7 {
      保证金：20像素; }


解决方案

绝对简单的混入会像这样：

  @mixin传统-IE（$版本：7）{
    .IE＃{$版本}＆安培; {
        @内容;
    }
}
 

输出：

  .baz {
    背景：#CCC;    @include传统，即{
        背景：黑色;
    }
}
 

如果你想发出了多个版本的IE一次不重复的工作方式，那么这将是一个办法做到这一点：

  $默认的传统，即：7 8 9默认;@mixin传统-IE（$版本：$默认遗留-IE）{
    $ SEL：（）;
    在$版本@each $ V {
        $ SEL：追加（$ SEL，引文结束（;），逗号，即＃{$ V}＆放大器。'）;
    }    ＃{$ SEL} {
        @内容;
    }
}包含.foo {
    背景：红色;    @include传统，即{
        背景：绿色;
    }
}{的.bar
    背景：黄色;    @include传统-IE（7 8）{
        背景：橙色;
    }
}
 

输出：

 包含.foo {
  背景：红色;
}
.ie7包含.foo，.ie8包含.foo，.ie9包含.foo {
  背景：绿色;
}{的.bar
  背景：黄色;
}
.ie7的.bar，.ie8的.bar {
  背景：橙色;
}
 

如果您希望能够用晚餐preSS所有IE浏览器的组装机，所有你需要补充的是一个变量和 @if 块：

  $启用遗留，即：真正的默认值;@mixin传统-IE（$版本：7）{
    @if $启用遗留，即{
        .IE＃{$版本}＆安培; {
            @内容;
        }
    }
}
 

设置 $启用遗留-即到假你不想在文件的顶部具备IE的具体样式，将其设置为真正如果你想在风格包括在内。你可以很容易地写一个反向混入隐藏样式旧IE无法使用，使得IE特定的文件保持不错，小的。

I'm looking for a solution to use a mixin for browser-specific CSS hacks. I'm using JavaScript to add the browser tag in the HTML class. Like .ie .ie7 .ie8 .ie9

I would like to use the mixin like:

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

DESIRED OUTPUT:

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

the mixin i tried to make:

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

the problem is the output is:

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

解决方案

The absolute simplest mixin would be like so:

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

Output:

.baz {
    background: #CCC;

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

If you wanted to emit styles that work for multiple IE versions at once without duplication, then this would be one way to do it:

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

If you want to be able to suppress all of the IE kludges all you need to add is one variable and an @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 at the top of the file you don't want to have the IE specific styles, set it to true if you do want the styles included. You could easily write a reverse mixin to hide styles that old IE can't make use of so that the IE specific file stays nice and small.

这篇关于是否有可能使用一个mixin针对特定浏览器CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！