Generated by SassMeister.com.

SassMeister-input.scss

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

// Here's the complex way to do a map:
$breakpoint-map: (
  small: (
    min-width: null,
    max-width: 479px,
    base-font: 16px,
    vertical-rhythm: 1.3
  ),
  medium: (
    min-width: 480px,
    max-width: 959px,
    base-font: 18px,
    vertical-rhythm: 1.414
  ),
  large: (
    min-width: 960px,
    max-width: 1099px,
    base-font: 18px,
    vertical-rhythm: 1.5
  ),
  xlarge: (
    min-width: 1100px,
    max-width: null,
    base-font: 21px,
    vertical-rhythm: 1.618
  )
);

// Its loops would look like this:
@each $label, $map in $breakpoint-map {
  $min-width: map-get($map, min-width);
  $max-width: map-get($map, max-width);
  $base-font: map-get($map, base-font);
  $vertical-rhythm: map-get($map, vertical-rhythm);
}

//////////
//  OR  //
//////////

// You could use a list of lists for simpler looping
$breakpoint-list: (
  (small, null, 479px, 16px, 1.3),
  (medium, 480px, 959px, 18px, 1.414),
  (large, 960px, 1099px, 18px, 1.5),
  (xlarge, 1100px, null, 21px, 1.618)
);

// Its loop is:
@each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list {
  // Your variables are already set!
}

///////////////////////
//  Querying Values  //
///////////////////////

// Map
$medium-map: map-get($breakpoint-map, medium);

// Custom function for lists:
@function get-list($label) {
  @each $list in $breakpoint-list {
    @if nth($list, 1) == $label {
      @return $list;
    }
  }
  @return null;
}
$medium-list: get-list(medium);