Responsive placeholders in SASS

breakpoints.css.scss

@mixin media-breakpoint($point) {

  // &{ @content; } doesn't mean anything in the compiled output,
  // but will workaround a SASS compiler issue that doesn't let
  // us use %placeholders inside nested media queries.

  @if $point == 'tablet-up' {
    @media screen and (min-width: 48em)     { &{ @content; } }
  }
  @else if $point == 'desktop-up' {
    @media screen and (min-width: 60em)     { &{ @content; } }
  }
  @else if $point == 'widescreen-up' {
    @media screen and (min-width: 71.25em)  { &{ @content; } }
  }
  @else if $point == 'desktop-down' {
    @media screen and (max-width: 71.249)   { &{ @content; } }
  }
  @else if $point == 'tablet-down' {
    @media screen and (max-width: 59.999em) { &{ @content; } }
  }
  @else if $point == 'phone-down' {
    @media screen and (max-width: 47.999em) { &{ @content; } }
  }
}

@mixin responsive-placeholder($name) {
  %#{$name} {
    @content;
  }

  %#{$name}-response {
    @include media-breakpoint ('tablet-up')     { @content; }
    
    @include media-breakpoint ('desktop-up')    { @content; }
    
    @include media-breakpoint ('widescreen-up') { @content; }

    @include media-breakpoint ('desktop-down')  { @content; }
    
    @include media-breakpoint ('tablet-down')   { @content; }
    
    @include media-breakpoint ('phone-down')    { @content; }
  }
}

Also, I'd really rather do this in LESS, but SCSS is the only preprocessor with the requisite features.