gistfile1.scss

// FILE: _mq-mixin-modern.scss
//
// standard media-query mixin with set breakpoints and the option for px-based min-width value
@mixin media-query($media-query){

  @if $media-query == "hand-and-up" {
    @media only screen and (min-width: $hand-start) { @content; }
  }
  @else if $media-query == "lap-and-up" {
    @media only screen and (min-width: $lap-start) { @content; }
  }
  @else if $media-query == "desk-and-up" {
    @media only screen and (min-width: $desk-start) { @content; }
  }
  
  @else if $media-query == "wall-and-up" {
    @media only screen and (min-width: $wall-start) { @content; }
  }

  @else if $media-query == "palm-and-down" {
    @media only screen and (max-width: ($hand-start - 1px)) { @content; }
  }

  // If $media-query arg is not named, it expects a px value to set a min-width
  // this should be used for all feature-based breakpoints
  @else {
    @media only screen and (min-width: ($media-query)) { @content; }
  }

}


// FILE: _mq-mixin-legacy.scss
//
// sets media-query mixin to not include any media queries, it outputs all media queries small -> big to have proper cascade
@mixin media-query($media-query){
  @if $media-query == "hand-and-up" {
    @content;
  }
  @else if $media-query == "lap-and-up" {
    @content;
  }
  @else if $media-query == "desk-and-up" {
    @content;
  }
  
  // Exclude wall and up, we'll assume IE won't be that huge.

  // Exclude "palm-and-down"

  // All feature/px-based breakpoints
  // This may cause an improper cascade if used in conjunction with the named breakpoints above,
  // but it's usually one or the other, not both.
  @else {
    @content; 
  }
}


// FILE: main.scss
@import "_mq-mixin-modern";
@import "other-partials";

// FILE: main-ie.scss
@import "_mq-mixin-legacy";
@import "other-partials";

// ^ Compile these separately and your HTML will need to look like this:
//
// <!--[if (gt IE 8) | (IEMobile)]><!-->
//  <link href="main.css">
// <!--<![endif]-->
//
// <!--[if (lt IE 9) & (!IEMobile)]>
//   <link href="main-ie.css">
// <![endif]-->

Had to rearrange the media query mixin so it would build correctly.

@mixin media-query($media-query){

@if $legacy-ie == true {
//render styles without media queries

@if $media-query == "hand-and-up" { @content; }

@else if $media-query == "lap-and-up" { @content; }

@else if $media-query == "desk-and-up" { @content; }

// exclude "wall and up", "hand-and-down"

// include custom breakpoints
@else {
  @content;
}

}
@else {

@if $media-query == "hand-and-up" {
  @media only screen and (min-width:$hand-start) { @content; }
}

@else if $media-query == "lap-and-up" {
  @media only screen and (min-width:$lap-start) { @content; }
}

@else if $media-query == "desk-and-up" {
  @media only screen and (min-width:$desk-start) { @content; }
}

@else if $media-query == "wall-and-up" {
  @media only screen and (min-width: $wall-start) { @content; }
}

@else if $media-query == "hand-and-down" {
  @media only screen and (max-width: ($hand-start - 1px)) { @content; }
}

// custom breakpoints
@else {
  @media only screen and ($media-query) { @content; }
}

}
}

main.css

$legacy-ie: false;
@import "mixins";
// all other imports after this

main-legacy.css

$legacy-ie: true;
@import "mixins";
// all other imports after this