Medium - CSS for the Functional Programmer - Color Maps

_colors.scss

$colors: (
  'light-grey': #f9f9f9,
  'mid-grey': #9b9b9b,
  'dark-grey': #4d4d4d,
  'white': #fff,
  'bright-blue': #6ad3ef,
  'light-blue': #4c92c3,
  'mid-blue': #0b73ac,
  'dark-blue':  #004a69,
  'mid-green': #1bba99,
  'dark-green': #19876f,
  'mid-red': #e7675f,
  'dark-red': #C65450
);

/* Use color: color('dark-red'); in SCSS */
@function color($color-name) {
  @return map-get($colors, $color-name);
}

/* Generate Composable Color Classes */
@each $color-name, $value in $colors  {
  /* Text Colors */
  .color-#{$color-name} {
    color: $value;
  }
  
  /* Background Colors */
  .background-color-#{$color-name} {
    background-color: $value;
  }
  
  /* Border Colors */
  .border-color-#{$color-name} {
    border-color: $value;
  }
  
  /* SVG Colors */
  .fill-#{$color-name} {
    fill: $value;
  }
}