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; }
Best Answer
The absolute simplest mixin would be like so:
Output:
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:
Output:
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:Set
$enable-legacy-ie
tofalse
at the top of the file you don't want to have the IE specific styles, set it totrue
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.