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.