Generate mobile-first SASS-Stylesheets for IE

I copied this code from chriseppstein, because it is great :)

Okay, here we go: Put this somewhere in your SASS-files. E.g. _vars.scss oder _helpers.scss, etc.

$media-queries: true !default;
$media-query-free-breakpoint: 1300px;
@mixin respond-to($min-width, $max-width: false) {
	@if $media-queries {
		@media screen and (min-width: $min-width) {
			@if $max-width {
				@media (max-width: $max-width) {
					@content
				}
			} @else {
		 		@content;
			}
		}
	}
	@else if $min-width <= $media-query-free-breakpoint and (not $max-width or $max-width and $max-width >= $media-query-free-breakpoint) {
		@content;
	}
}

Be sure to adjust $media-query-free-breakpoint accordingly.

Now, create a new output file, like screen-ie.scss, with this content (assuming your main file is called screen.scss):

$media-queries: false;
@import "screen";

Next, convert all your media queries to use the new mixin:

@include respond-to(1000px) { ... }

Last, but not least: Add the screen-ie.css to your HTML:

<!--[if (gt IE 8) | (IEMobile)]><!-->
      <link rel="stylesheet" href="/css/screen.css">
<!--<![endif]-->

<!--[if (lt IE 9) & (!IEMobile)]>
      <link rel="stylesheet" href="/css/screen-ie.css">
<![endif]-->

And your done – IE is up and running. Thanks to chriseppstein!

tillsanders/generate-mobile-first-sass-stylesheets-for-ie.markdown

Generate mobile-first SASS-Stylesheets for IE