multidimmensional_map.scss

// Tested in SCSS 3.3.0 "Maptastic Maple"

// One-dimensional map of base colors
$colorsmap: (
  'blue': #2244ff,
  'green': #22ff44,
  'red': #ff4422,
  );

// Two-dimensional map for generating variants of base colors
$variants: (
  'light': (
    'color': #303030
    ),
  'dark': (
    'color': #f0f0f0
    )
  );

// Iterate through base colors
@each $name, $bgcolor in $colorsmap {
  .box-#{$name} {
    @extend .clearfix;
    background: $bgcolor;
    padding: 8px;
    color: #f0f0f0;
  }

  // And generate variants for each base color
  @each $vari, $val in $variants {
    $bgc: #fff;
    $tcol: map-get($val, 'color');
    @if ('light' == $vari) {
      $bgc: lighten($bgcolor, 24%);
    } @else if ('dark' == $vari) {
      $bgc: darken($bgcolor, 16%);
    }
    .box-#{$vari}-#{$name} {
      @extend .clearfix;
      background: $bgc;
      color: $tcol;
      padding: 8px;
    }
  }
}