responsive-sass-mixin.scss

/* --------------------------
 * RESPONSIVE MIXINS
 * -------------------------- */

$respond-to-queries: (smartphone: 'all and (max-width: 600px)',
tablet-portrait: 'all and (max-width: 768px)',
tablet: 'all and (max-width: 1024px)',
desktop-medium: 'all and (max-width: 1240px)'
);

@mixin respond-to($query) {
  $media_query: $query;

  @if map-has-key($respond-to-queries, $query) {
    $media_query: map-get($respond-to-queries, $query);
  }

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