Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

// http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
//http://maketea.co.uk/2014/07/21/managing-relationships-between-colours-with-sass.html
// setting
$color-palette :( 
  red : (
    base : #ff0000,
    dark : #ffcccc
  ),
  blue : (
    base : #0000ff,
    light : #00bbff,
  )
) !default;
// color(色系統, トーン)
@function color($color, $tone){
  @return map-get(map-get($color-palette, $color), $tone)
}
@each $name, $palette in $color-palette {
  @each $tone, $code in $palette {
    .sample-color-palette-#{$name}-#{$tone}{
      background : color($name, $tone);
      .black-text{ color : #000 };
      .white-text{ color: #fff };
    }
  }
}

SassMeister-output.css

.sample-color-palette-red-base {
  background: red;
}
.sample-color-palette-red-base .black-text {
  color: black;
}
.sample-color-palette-red-base .white-text {
  color: white;
}

.sample-color-palette-red-dark {
  background: #ffcccc;
}
.sample-color-palette-red-dark .black-text {
  color: black;
}
.sample-color-palette-red-dark .white-text {
  color: white;
}

.sample-color-palette-blue-base {
  background: blue;
}
.sample-color-palette-blue-base .black-text {
  color: black;
}
.sample-color-palette-blue-base .white-text {
  color: white;
}

.sample-color-palette-blue-light {
  background: #00bbff;
}
.sample-color-palette-blue-light .black-text {
  color: black;
}
.sample-color-palette-blue-light .white-text {
  color: white;
}