IE Mediaqueries

_helper.scss

@mixin respond-to($media) {
  @if $media == small {
    @media only screen and (max-width: 699px) { @content; }
  }
  @else if $media == medium {
    @if $oldIE {
      @content;
    } @else {
      @media only screen and (min-width: 600px) { @content; }
    }
  }
  @else if $media == large {
    @if $oldIE {
      @content;
    } @else {
      @media only screen and (min-width: 700px) { @content; }
    }
  }
  @else if $media == larger {
    @if $oldIE {
    } @else {
      @media only screen and (min-width: 1050px) { @content; }
    }
  }
  @else if $media == evenlarger {
    @if $oldIE {
    } @else {
      @media only screen and (min-width: 1250px) { @content; }
    }
  }
  @else if $media == huge {
    @if $oldIE {
    } @else {
      @media only screen and (min-width: 1400px) { @content; }
    }
  }
}

_main.scss

h2 {
	padding: 5px 10px 5px 8px;
	font-size: 18px;
	@include respond-to(large) {
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 24px;
	}
}

ie.scss

@import "compass";

$oldIE: true;

@import "main";

index.html

<!--[if gte IE 9]> -->
  <link rel="stylesheet" href="/css/style.css" />
<!-- <![endif]-->
<!--[if lt IE 9]>
  <link rel="stylesheet" href="/css/ie.css" />
<![endif]-->

style.scss

@import "compass";

$oldIE: false;

@import "main";