Generated by SassMeister.com.

SassMeister-input.scss

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

//From http://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184"

/* 2.Multiple Values for Added Awesomeness */
// _m-buttons.scss

$buttons: (
  error: (#d82d2d, #666),
  success: (#52bf4a, #fff),
);

// $buttons: (
//   error: (#d82d2d, #666),
//   success: (#52bf4a, #fff),
//   warning: (#c23435, #fff),
//   loading: (#a1a1a1, #ddd)
// );
 
.m-button {
  // Common Styles
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
  
  @each $name, $colors in $buttons {
    // Sass is strange - Arrays start at 1 not 0!
    $bgcolor: nth($colors, 1); // Select 1st array
    $fontcolor: nth($colors, 2); // Select 2nd array
    
    // Magic selector appends to name of parent element 
    &--#{$name} {
      background-color: $bgcolor;
      color: $fontcolor;
    }  
  }
}

SassMeister-output.css

/* 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;
}