_breakpoint.scss

@mixin breakpoint($size: "", $maxWidth: false, $noMQSelector: "") {
    @if $size == "" {
        $size: 55em; // Put your "main" or most-used breakpoint here to use it as a default
    }
    
    @if $noMQSelector == true {
      $noMQSelector: ".oldie"; // this is the default catch all selector, jsut pass true, unquoted.
    }

    // Default, `min-width` media query
    @if $maxWidth == false {
        @media (min-width: $size) { @content; }
    }
    // Alternative `max-width` media query
    @else {
        @media (max-width: $size) { @content; }
    }

    @if $noMQSelector != "" {
      #{$noMQSelector} & { @content; }
    }
}

style.css

.foo {
  width: 100%;
}

@media (min-width: 10em) {
  .foo {
    width: 50%;
  }
}

@media (min-width: 55em) {
  .foo {
    width: 25%;
  }
}

@media (max-width: 5em) {
  .foo {
    float: left;
  }
}

@media (min-width: 55em) {
  .foo {
    position: absolute;
    clear: none;
  }
}

.oldie .foo {
  position: absolute;
  clear: none;
}

style.scss

@import "breakpoint";

.foo {
    width: 100%;
    
    // Standard usage
    @include breakpoint(10em) {
        width: 50%;
    }
    
    // Look ma, no parameters! (Quick and easy use for the most common breakpoint)
    @include breakpoint {
        width: 25%;
    }
    
    // Use a max-width media query instead
    @include breakpoint(5em, true) {
        float: left;
    }
    
    // include a selector that breaks out of the media query (useful for IE fixes!)
    @include breakpoint(55em, false, '.oldie') {
    position: absolute;
    clear: none;
  }

}