A Sass mixin for media queries and IE
06 August 2012I'm currently finishing up some front-end co-coding for a client who hired me for all the mobile/responsive goodness. As well as this they wanted me to instigate and create the CSS using Sass/SCSS. Near the end of the project they asked how we would support IE8/7/6.
We did discuss this at the start of the project but carried on with 'all the things'. I had seen all the hotness around Sass 3.2 that would allow you to create a respond-to mixin. So decided to upgrade my Sass gem to the latest version and updated all my 'hand coded' media queries with the relevant Sass/SCSS mixins.
This was great, kinda, it now took the px/em value out of the CSS and allowed me to change it in my Sass settings/mxins/variables file but it did not let me create a fallback for internet explorer.
Here is the SCSS and the CSS I wanted/expected.
The SCSS setup
// Setting up a quick respond-to mixin
@mixin respond-to($name) {
@if $name == tablet {
@media only screen and (min-width: 768px) { @content; }
}
}
// So this is the mixin that I'm currently using
@mixin this-is-what-i-want($name. $ie-class) {
ie-class-here { @content; }
media-query-here } @content; }
}
The SCSS file
// This is how I include the mixin within my SCSS file
.foo {
margin: 0 auto;
padding: 0 10px;§
@include this-is-what-i-want(tablet, lt-ie9) {
min-width: 940px;
max-width: 1220px;
padding: 0 20px;
}
}
My 'wished for' CSS output
.foo {
margin: 0 auto;
padding: 0 10px;§
}
.lt-ie9 .foo {
min-width: 940px;
max-width: 1220px;
padding: 0 20px;
}
@media only screen and (min-width: 768px) {
.foo {
min-width: 940px;
max-width: 1220px;
padding: 0 20px;
}
}
To The Internets
So I started crawling the gists on gitub to see if anyone had created a little code snippet just for this reason. I didn't. There was nothing. So I quickly asked some really, clever and amazing people on the twitters and I got this bit of code from the fantastic @snugug.
mixin respond-wrapper-fallback($name, $wrapper-class) {
.#{$wrapper-class} & {
@content;
}
@include respond-to($name) {
@content;
}
}
This now turns my 'wished for' CSS output into a reality and now means I can create a fallback for Internet Explorer from 'whatever' CSS Media Query block I need.
To skin a cat.
There's more than one solution for patching up code for Internet Explorer using Sass. This is the solution I required. Jake Archibald created a IE-friendly mobile-first solution which I shall be likely to use at the start of future projects and there's Nicolas' solution also.