SASS generate color opacity map

_color-opacity-classes.scss

@import "color-opacity-map";


/*
  This will generate classes for all colors
  =========================================
  .yellow-100 {background-color: #fefce2}
  ...
  .yellow-900 {background-color: #464102}


  .red-100 {background-color: #fed2c3}
  ...
  .red-900 {background-color: #280b01}
*/
@each $colorName, $map in $opacity-map {
  @each $name, $value in $map {
    .#{$colorName}-#{$name} {
      background-color: $value;
    }
  }
}

/*
  We can retrieve a specific color by using get-color-opacity()
  =============================================================
*/
a {
  color: get-color-opacity($red, 500);
  &:hover {
    color: get-color-opacity($red, 700);
  }
}

_color-opacity-map.scss

/*
    Base colors
    ===========
*/
$solid-colors: (
    "blue": #4A90E2,
    "indigo": #3F51B5,
    "pink": #CB3066,
    "red": #F14004,
    "orange": #e97d23,
    "yellow": #F8E71C,
    "green": #28C76E,
    "teal": #20c997,
    "cyan": #9c27b0
);

@function gen-color-opacity-map($color) {
  $map: (
    50: lighten($color, 50),
    100: lighten($color, 40),
    200: lighten($color, 30),
    300: lighten($color, 20),
    400: lighten($color, 10),
    500: $color,
    600: darken($color, 10),
    700: darken($color, 20),
    800: darken($color, 30),
    900: darken($color, 40),
  );
  @return $map;
}

@function gen-color-full-opacity-map($color-map) {
  $full-color-map: ();
  @each $name, $value in $color-map {
    $map: ();
    $map: map-merge($map, ($name: gen-color-opacity-map($value)) );
    $full-color-map: map-merge($full-color-map, $map);
  }
  @return $full-color-map;
}

/*
Generate color opacity map
==========================
$opacity-map: (
  yellow: (
    100: #fefce2,
    .....,
    900: #464102
  ),
  red: (
    100: #fed2c3,
    .....,
    900: #280b01
  )
)
*/
$opacity-map: gen-color-full-opacity-map($solid-colors);

// Fuction for retrieving a specific color
@function get-color-opacity($color, $opacity) {
  @return map-get(map-get($opacity-map, $color), $opacity);
}