Is it possible to use a mixin for browser-specific CSS

Question

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

Answer 1

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.