Simple Breakpoints

simple-breakpoints.scss

// Simple Breakpoints Demo: https://codepen.io/mikemai2awesome/full/MXvzYO/

/*------------------------------------*\
  Map Get Deep
\*------------------------------------*/
@function map-get-deep($map, $keys...) {
  @if length($keys) == 1 {
    $keys: nth($keys, 1);
  }
  $warn: '#{nth($keys, 1)}';
  $length: length($keys);
  $get: map-get($map, nth($keys, 1));

  @if $length > 1 {
    @for $i from 2 through $length {
      @if $get != null and type-of($get) == 'map' {
        $warn: $warn + '->#{nth($keys, $i)}';
        $get: map-get($get, nth($keys, $i));

        @if $get == null {
          @return map-get-deep-warning($warn, $get, nth($keys, $i));
        }
      }
      @else {
        @return map-get-deep-warning($warn, $get, nth($keys, $i));
      }
    }
  }

  @return $get;
}


/*------------------------------------*\
  Breakpoint Settings
\*------------------------------------*/
$breakpoints: (
  xxsmall:  20em,
  xsmall:   25em,
  small:    37.5em,
  medium:   50em,
  large:    62.5em,
  xlarge:   75em,
  xxlarge:  87.5em,
  xxxlarge: 120em
);


/*------------------------------------*\
  Breakpoint Tools
\*------------------------------------*/
@function breakpoint($name) {
  @return map-get($breakpoints, $name);
}

@mixin respond-to($min: 0, $max: 0, $orientation: 0) {
  @if type-of($min) == string {
    $min: breakpoint(#{$min});
  }
  @else {
    $min: $min;
  }

  @if type-of($max) == string {
    $max: breakpoint(#{$max}) - 0.001em; // 0.001em is for fixing IE and FF subpixel issue.
  }
  @else {
    $max: $max;
  }

  // Defaults to all media
  $query-widths: "all" !default;
  // Set both min and max
  @if $min != 0 and $max != 0 {
    $query-widths: "(min-width: #{$min}) and (max-width: #{$max})";
  }
  // Set just min
  @else if $min != 0 and $max == 0 {
    $query-widths: "(min-width: #{$min})";
  } 
  // Set just max
  @else if $min == 0 and $max != 0 {
    $query-widths: "(max-width: #{$max})";
  } 
  
  // Set orientation
  @if $orientation != 0 {
    $query-orientation: "and (orientation: #{$orientation})";
    
    @media #{$query-widths} #{$query-orientation} { @content; }
  }
  @else {
    @media #{$query-widths} { @content; }
  }
}