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

First, this file declares a mixin for using named media queries, which roughly correspond to mobile device screen sizes (expressed in ems).

Then it declares a second mixin, which generates one global placeholder and another placeholder with the -response suffix. Placeholder %foo can be used anywhere a rule needs to be globally applied, and placeholder %foo-respond can be applied inside of media queries.

What this means in practice is you can build re-usable components via placeholders in SCSS and apply them to elements with semantic names, instead of giving elements an array of class names that define their appearance (which, in practice, is a maintenance nightmare equal to designing via the style tag).

You can also use the same components inside of media queries, so if something needs to look totally different at a different screen size, you don't need to override the component, just apply a different one.

Anybody who has fought with Bootstrap to make a usable mobile website will recognize immediately that this is kind of a Big Deal.

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