Responsive SASS (SASS 3.2): Chain media queries and coordinate named breakpoints

responsive.scss

// Created by Max Luster (@maxluster)
// Usage instructions at https://bugsnag.com/blog/responsive-typography-with-chained-media-queries
// Requires SASS 3.2, untested in older versions
// SASS 3.3 users should use: https://gist.github.com/maxluster/168e650267bac9faaafd

//Responsifies any single property across a range of named or numeric breakpoints
@mixin responsive($properties, $default-value, $value-breakpoint-lists...){

  // Default set of named breakpoints. Override by setting this globally.
  $named-breakpoints: "xxs" 310px, "xs" 550px, "s" 770px, "m" 1180px, "l" 1420px, "xl" 1860px, "xxl" 2200px !default; 

  // Apply default values
  @each $property in $properties{
    #{$property}: #{$default-value};
  }
  
	@each $value-breakpoint-list in $value-breakpoint-lists{
		$value: nth($value-breakpoint-list, 1);
		$breakpoint: nth($value-breakpoint-list, 2);

    // If using a px based breakpoint
    @if type-of($breakpoint) == number{
      @media screen and (min-width: $breakpoint) {
        @each $property in $properties{
          #{$property}: #{$value};
        }
      }
    }
    
    // If using named breakpoint
    @else{
      $stringMatch: false;
      @each $named-breakpoint in $named-breakpoints{
        // If string match, apply property value pair at named breakpoint match
        @if nth($named-breakpoint, 1) == $breakpoint{
          $stringMatch: true;
          @media screen and (min-width: nth($named-breakpoint, 2)) {
            @each $property in $properties{
              #{$property}: #{$value};
            }
          }
        }
      }
      @if(stringMatch == false){
        @warn "Couldn't find a named breakpoint: " + $breakpoint;
      }
    }

	}
}

// Applies code at resolutions above a given breakpoint, based on a number or list of named breakpoints
@mixin named-breakpoint($breakpoint){
  $named-breakpoints: "xxs" 310px, "xs" 550px, "s" 770px, "m" 1180px, "l" 1420px, "xl" 1860px, "xxl" 2200px !default; 
  
  @if type-of($breakpoint) == number {
    @media only screen and (min-width: $breakpoint) { @content; }
  }
  @else{
    $stringMatch: false;
    @each $named-breakpoint in $named-breakpoints{
      // If string match
      @if nth($named-breakpoint, 1) == $breakpoint{
        $stringMatch: true;
        @media only screen and (min-width: nth($named-breakpoint, 2)) { @content; }
      }
    }
    @if($stringMatch == false){
      @warn "Couldn't find a named breakpoint: " + $breakpoint;
    }
  }
}