SASS_Maps_sample.md

SASS color maps

1. Theme colors (your brand colors)
2. UI colors (colors for errors, flashes, success buttons...)
3. Gray colors (colors for typography, shadows, backgrounds)
4. Brand colors (social media branded elements like Facebook, Twitter, etc.)

example:

    // UI Colors
    $color-robin    : #8FCCCC;
    $color-vista    : #79D1AD;
    $color-mandy    : #e67478;
    $color-apricot  : #ed8864;
    $color-eastside : #9279c3;
    
    // UI Colors Map
    $ui-colors: (
      default        : $color-robin,
      success        : $color-vista,
      error          : $color-mandy,
      warning        : $color-apricot,
      info           : $color-eastside
    );

usage

    
    .button{
        @each $theme, $color in $ui-colors{
            &--#{$theme}{
                background-color: $color;
                color: transparentize($white, .2);
            }
        }
    }
    //Usage:
    //.button .button--default
    //.button .button--success
    //.button .button--error

參考資料

Advanced CSS: Sass Maps to UI Components