This is an example of how I use SCSS to output separate stylesheets for each breakpoint while only maintaining it in one place, i've also go another version of the mixing which uses the same concept without breakpoints. At some point i'd like to combine these into a single mixin.

_base.scss

@import "breakpoint";

body {

  @include breakpoint(large){
    background: red;
  }

  @include breakpoint(normal){
    background: green;
  }

  @include breakpoint(small){
    background: blue;
  }

}

_breakpoint.scss

$breakpoints: (
  large: 'screen and (min-width: 1200px)',
  normal: 'screen and (min-width: 960px) and (max-width: 1200px)',
  normal-up: 'screen and (min-width: 960px)',
  small: 'screen and (max-width: 960px)',
);

@mixin breakpoint($key){
  @if map-has-key($breakpoints-to-output, $key) {
    @media #{map-get($breakpoints, $key)} {
      @content;
    }
  }
}

all.scss

@import "base";

$breakpoints-to-output: (
  large: true,
  normal: ture,
  small: ture,
);

mobile.scss

@import "base";

$breakpoints-to-output: (
  small: ture,
);