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]-->

// FILE: _mixins.scss

@if $legacy-ie == true {

@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", "hand-and-down"

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

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

@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; }
}

}
}

// FILE: main.scss
$legacy-ie: false;
@import "mixins";

// FILE: main-ie.scss
$legacy-ie: true;
@import "mixins";

Set a flag for the mixin to let it know if it should utilize the Modernizr .no-mediaqueries class

The new mixin:

@mixin respond-to( $mediaQuery, $fallback ){

  @if $fallback == true {
    @media $mediaQuery {
      @content;
    }
    .no-mediaqueries & {
      @content;
    }
  }

  @else {
    @media $mediaQuery {
      @content;
    }
  }

}

Here it is in use:

.object {
  font-size: 12px;
  @include respond-to("only screen and (min-width: 600px)", true) {
    font-size: 16px;
  }
}

The output would look like this:

.object { font-size: 12px; }

@media only screen and (min-width: 600px) {
  .object { font-size: 16px; }
}

.no-mediaqueries .object { font-size: 16px; }

The previous one duplicates too much code within the main stylesheet. Probably too costly to be useful, although it is nice it relies on the modernizr class for feature detecting instead of just serving the "non-mediaquery" styles to IE alone.

Currently, the best route might be two "main" stylesheets, one for IE that includes a flag to tell the media query mixin to not print out the actual media queries.

// Although it is very simple, it allows for the most flexible mixin use.
// So we set some variables for our common breakpoints.

$hand-start: 520px;
$lap-start:  727px;
$desk-start: 1024px;
$wall-start: 1200px;

$palm-and-down: "only screen and (max-width: " + ($hand-start - 1px)+ ")";
$hand-and-up: "only screen and (min-width:" + $hand-start + ")";
$lap-and-up: "only screen and (min-width:" + $lap-start+ ")";
$desk-and-up: "only screen and (min-width:" + $desk-start+ ")";
$wall-and-up: "only screen and (min-width:" + $wall-start+ ")";


@mixin respond-to( $mediaQuery, $fallback ){

  @if $legacy-ie == true {
    @content;
  }

  @else {
    @media $mediaQuery {
      @content;
    }
  }

}


// It can then be used like this
.feature {
  font-size: 14px;

  @include respond-to( $lap-and-up ){
    font-size: 20px;
  }

  @include respond-to( "only screen and (min-height: 700px" ) {
    margin-bottom: .5em;
  }
}

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

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