Generated by SassMeister.com.

SuperDuperBreakpoints.css

/* Media Query */
@media (max-width: 767px) {
  body {
    content: "Small screen"; } }

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    content: "Medium screen"; } }

@media (min-width: 1025px) {
  body {
    content: "Large screen"; } }

/* Loops through breakpoints */
.foo {
  content: "Gets looped through $each-media-queries"; }

.bar {
  content: "Loops with media suffixes!"; }

@media (max-width: 767px) {
  .foo {
    content: "Gets looped through $each-media-queries"; }
  .bar\@sm {
    content: "Loops with media suffixes!"; } }

@media (min-width: 768px) and (max-width: 1024px) {
  .foo {
    content: "Gets looped through $each-media-queries"; }
  .bar\@md {
    content: "Loops with media suffixes!"; } }

@media (min-width: 1025px) {
  .foo {
    content: "Gets looped through $each-media-queries"; }
  .bar\@lg {
    content: "Loops with media suffixes!"; } }

SuperDuperBreakpoints.scss

// ----
// libsass (v3.2.5)
// ---- 

$screen-small-max: 767px !default;
$screen-medium-min: 768px !default;
$screen-medium-max: 1024px !default;
$screen-large-min: 1025px !default;

$res-separator: \@ !default;



/// Media-map.
///
/// @prop {String} key - Media name
/// @prop {String} value - Media query

$media-queries: (
  sm: "(max-width: #{$screen-small-max})",
  md: "(min-width: #{$screen-medium-min}) and (max-width: #{$screen-medium-max})",
  md-min: "(min-width: #{$screen-medium-min})",
  md-max: "(max-width: #{$screen-medium-max})",
  lg: "(min-width: #{$screen-large-min})"
) !default;



/// Each Media-map.
///
/// @prop {String} key - Media name
/// @prop {String} value - Media query

$each-media-queries: (
  sm: "(max-width: #{$screen-small-max})",
  md: "(min-width: #{$screen-medium-min}) and (max-width: #{$screen-medium-max})",
  lg: "(min-width: #{$screen-large-min})"
) !default;



/// Wraps content in media query.
///
/// @param {String} $query
///   Matches `$media` for key. Can also supply custom query.
///
/// @example scss - Media key
///   @include media(sm) { ... }
///
/// @example scss - Custom query
///   @include media("(max-width: 768px)") { ... }

@mixin media($query) {
  $query: if(map-has-key($media-queries, $query), map-get($media-queries, $query), $query);

  @media #{$query} {
    @content;
  }
}


/// Loops through every media and wraps content in media queries respectively.
///
/// @param {Bool} $include-queryless [true]

@mixin each-media($include-queryless: true) {
  @if $include-queryless {
    $res-key: false !global;

    @content;
  }

  @each $key, $query in $each-media-queries {
    $res-key: if(map-has-key($media-queries, $key), nth($key, 1), false) !global;

    @include media($query) {
      @content;
    }
  }
}



/// Responsive selector. Appends media key to selector. Useful for loops.
///
/// @param {String} $selector
/// @param {String} $media [$res-key]
///
/// @return {String} - `$selector` with `$media`-suffix

@function res($selector, $media: ()) {
  @if not global-variable-exists(res-key) {
    @error "res() needs to be within an each-media() mixin";
  } @else {
    $media: $res-key;
  }
  
  @if $media {
    @return $selector + $res-separator + $media;
  } @else {
    @return $selector;
  }
}



/* Media Query */
@include media(sm) {
  body { content: "Small screen"; }
}

@include media(md) {
  body { content: "Medium screen"; }
}

@include media(lg) {
  body { content: "Large screen"; }
}

/* Loops through breakpoints */
@include each-media {
  .foo { content: "Gets looped through $each-media-queries"; }
  
  #{res(".bar")} { content: "Loops with media suffixes!"; }
}