Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SASS generate color opacity map
@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);
}
}
/*
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.