Breakpoints Mixin

respond-to.scss

/* Variables */
@function breakpoints($name) {
  @return map-get($breakpoints, $name);
}

$breakpoints: (
  xs: 480px,
  sm: 768px,
  md: 992px,
  lg: 1200px,
  xl: 1440px,
  xxl: 1660px,
);

/* Mixin */
@mixin respond-to($media) {
  @each $breakpoint in $breakpoints {
    $name: nth($breakpoint, 1);
    $value: nth($breakpoint, 2);
    $i: index($breakpoints, $breakpoint);
    $nextI: $i + 1;

    // Min Widths
    // eg. sm (sm and greater)
    @if $media == $name {
      @media only screen and (min-width: $value) {
        @content;
      }
    }

    // Breakpoints only
    // eg. sm-only (from sm to md - 1)
    @if $nextI < length($breakpoints) {
      $nextBreakpoint: nth($breakpoints, $nextI);
      $nextValue: nth($nextBreakpoint, 2);

      // Max Widths
      // eg. sm-max (up to sm)
      $max: #{$name + '-max'};
      @if $media == $max {
        @media only screen and (max-width: #{$nextValue - 1}) {
          @content;
        }
      }


      $only: #{$name + '-only'};
      @if $media == $only {
        @media only screen and (min-width: $value) and (max-width: #{$nextValue - 1}) {
          @content;
        }
      }
    }
  }
}