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.

Answer 2

You're overcomplicating things. :) It could be as simple as that:

.box-test {
  margin: 10px;

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

Result:

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

Answer 3

I have tried adding mixin for "@-moz-document url-prefix()" FF hack but it was not recognized by SASS and SASS was throwing error. so I think better solution is to create _hack.sass file and add css hacks which will not be compiled by SASS. I include this file whenever required.

@import "hack";

I am adding answer this as I feel it will be useful to someone who is struggling to get mozilla/safari hack works.