CodePen

HTML

            
              <h1>Quick demo of conditional media queries for IE</h1>
            
          
!

CSS

            
              $old-IE: true;
$old-IE-width: 800px;

@mixin mq($query, $value){

  @if not $old-IE {
    
    @media only screen and (#{$query}: #{$value}){
      @content;
    }
  } 

  @if $old-IE {
  
    @if $old-IE and $query == 'min-width' and $value < $old-IE-width {
      @content;
    }

    @if $old-IE and $query == 'max-width' and $value > $old-IE-width {
      @content;
    }

  }
}

body {
  background: pink;
  
  @include mq('min-width', 600px){
    content: 'min-width: 600px';
  }

  @include mq('min-width', 900px){
    content: 'min-width: 900px';
  }

  @include mq('max-width', 600px){
    content: 'max-width: 600px';
  }

  @include mq('max-width', 900px){
    content: 'max-width: 900px';
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................