Responsive Breakpoint Handler

responsive.scss

/**
 * Responsive breakpoint, to be used as @include breakpoint(name) {}
 */
@mixin breakpoint($name) {
  @if map-has-key($breakpoints, $name) { // 1
    @media #{inspect(map-get($breakpoints, $name))} { // 2
      @content;
    }
  }
  @else { // 3
    @warn "Couldn't find a breakpoint named `#{$name}`."; // 4
  }
}



/**
 * Define the breakpoints as a Sass list
 */
$breakpoints: (
  'fluid': ( max-width:  751px ),
);