Last active
March 15, 2022 21:01
-
-
Save taupecat/8bf6adc0fd104d3a8f734534ef20703f to your computer and use it in GitHub Desktop.
A Sass color getter that also handles transparency
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Color names come from https://www.color-blindness.com/color-name-hue/ | |
// The color values can be any valid color format: hex, rgb, hsl, CSS color names, | |
// etc. But probably best _not_ to use CSS color names. | |
$palette: ( | |
'black': #000, | |
'cornflower-blue': #55abf2, | |
'grey': #808080, | |
'fire-engine-red': #d12118, | |
'forest-green': #20a037, | |
'limeade': #56b02c, | |
'maya-blue': #78bffa, | |
'nero': #171717, | |
'pelorous': #2a7dc2, | |
'rio-grande': #bfce18, | |
'saffron': #f0c63b, | |
'silver-sand': #bcbbb8, | |
'smalt': #004d8d, | |
'white': #fff, | |
'wild-sand': #efedea, | |
); | |
// Get the named color from our color map, with optional opacity. | |
// @param string $color A named color found in our $colors map. | |
// @param number $opacity Desired opacity, defaulting to 1 (full opacity). | |
// @return color The requested color with the alpha value. Remember that "color" is a value type of its own in Sass. | |
@function get-color( $color, $opacity: 1 ) { | |
// Check to make sure the named color we requested exists in our $colors map. | |
@if map-has-key( $palette, $color ) { | |
// If so, return the color value along with the alpha channel value. | |
@return transparentize( map-get( $palette, $color ), 1 - $opacity ); | |
} | |
// If the requested color name was not found in our map, return magenta instead | |
// (so it's obvious that something is wrong without completely erroring out). | |
@return #f0f; | |
} | |
// Usage: | |
a { | |
color: get-color( 'pelorous' ); | |
} | |
.semi-transparent-background { | |
background: get-color( 'forest-green', 0.5 ); | |
} | |
So many fistbumps. This is great work!
Thank you!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
So many fistbumps. This is great work!