An Introduction to Sass Maps: Usage (Generated by SassMeister.com.)

SassMeister-input.scss

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

/*
Source: http://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184
Topic: An Introduction to Sass Maps: Usage
*/

/* 1. Loop Through a Map and Generate Classes */

/* Define the Sassy Map called $icons */
$icons: (
  checkmark: a,
  plus: b,
  minus: c
);
 
/* For each key in the map, created an own class */
@each $name, $value in $icons {
  .icon--#{$name} {
    content: $value;
  }
}

/* 2.Multiple Values for Added Awesomeness */
// _m-buttons.scss
$buttons: (
  error: (#d82d2d, #666),
  success: (#52bf4a, #fff),
  warning: (#c23435, #fff)
);
 
.m-button {
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
   
  @each $name, $colors in $buttons {
    $bgcolor: nth($colors, 1);
    $fontcolor: nth($colors, 2);
     
    &--#{$name} {
      background-color: $bgcolor;
      color: $fontcolor;
    }  
  }
}

/* 3.Handling Layers (z-index) */
// _config.scss
$layer: (
  offcanvas: 1,
  lightbox: 500,
  dropdown: 10,
  tooltip: 15
);
 
// _m-lightboxes.scss
@function layer($name) {
  @if map-has-key($layer, $name) {
    @return map-get($layer, $name);  
  }
   
  @warn "The key #{$name} is not in the map ’$layer’";
  @return null;
};
 
.m-lightbox {
  z-index: layer(lightbox);
}

/* 4.Using Base Styles for Fonts */
// _config.scss
$font: (
  color: #666,
  family: (Arial, Helvetica),
  size: 16px,
  line-height: 1.4
);
 
// _presets.scss
body {
  color: map-get($font, color);
  font-family: map-get($font, family);
  font-size: map-get($font, size);
  line-height: map-get($font, line-height);
}

/* 5.Breakpoints */
// Map with much breakpoints
$breakpoints: (
    small: 320px,
    medium: 600px,
    large: 768px
);
 
// Respond-To Mixin
@mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        $value: map-get($breakpoints, $breakpoint);
         
        @media screen and (min-width: $value) {
            @content;
        }
    }
     
    @warn "Unknown `#{$breakpoint}` in $breakpoints";
}
// Sass
.m-tabs {
  background-color: #f2f2f2;
   
  @include respond-to(medium) {
    background-color: #666;
  }
}

/* 6. Advanced Usage for Colors */
// Scheme of colors
$colorscheme: (
  gray: (
    base: #ccc,
    light: #f2f2f2,
    dark: #666
  ),
  brown: (
    base: #ab906b,
    light: #ecdac3,
    dark: #5e421c
  )
);
// Our function for shorter usage of map-get();
@function setcolor($scheme, $tone: base) {
    @return map-get(map-get($colorscheme, $scheme), $tone);
}
// Sass
.element {
  color: setcolor(brown);
}
.element--light {
  color: setcolor(brown, light);
}

SassMeister-output.css

/* 1. Loop Through a Map and Generate Classes */
/* Define the Sassy Map called $icons */
/* For each key in the map, created an own class */
.icon--checkmark {
  content: a;
}

.icon--plus {
  content: b;
}

.icon--minus {
  content: c;
}

/* 2.Multiple Values for Added Awesomeness */
.m-button {
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
}

.m-button--error {
  background-color: #d82d2d;
  color: #666;
}

.m-button--success {
  background-color: #52bf4a;
  color: #fff;
}

.m-button--warning {
  background-color: #c23435;
  color: #fff;
}

/* 3.Handling Layers (z-index) */
.m-lightbox {
  z-index: 500;
}

/* 4.Using Base Styles for Fonts */
body {
  color: #666;
  font-family: Arial, Helvetica;
  font-size: 16px;
  line-height: 1.4;
}

/* 5.Breakpoints */
.m-tabs {
  background-color: #f2f2f2;
}

@media screen and (min-width: 600px) {
  .m-tabs {
    background-color: #666;
  }
}

/* 6. Advanced Usage for Colors */
.element {
  color: #ab906b;
}

.element--light {
  color: #ecdac3;
}