Skip to content

Instantly share code, notes, and snippets.

@lewismcarey
Last active May 4, 2023 12:10
Show Gist options
  • Save lewismcarey/de2a70fe93ab235ba103 to your computer and use it in GitHub Desktop.
Save lewismcarey/de2a70fe93ab235ba103 to your computer and use it in GitHub Desktop.
Get Color from SASS Color Map
// ----
// libsass (v3.2.5)
// ----
// Color Map
$colors: (
blue: #0000FF,
red: (
base: #FF0000,
light: #EEEEFF,
dark: #5555FF
)
);
// Color Function
@function get-color( $color, $shade: 'base', $map : $colors ){
// check color exists
@if (map-has-key($map, $color)) {
$value: map-get($map, unquote($color));
// check if color or map
@if type-of($value) == color {
// return color
@return $value;
}
// check shade of color exists
@if (map-has-key($value, $shade)) {
// return shade of color
@return map-get($value, $shade);
}
}
// else do nothing
@return null;
}
.color {
color: get-color(blue);
background-color: get-color(red, dark);
border-top-color: get-color(pink); // no color so null
border-bottom-color: get-color(red, darker); // no shade in map so null
border-right-color: get-color(green, dark); // not a map so returns color
}
.color {
color: #0000FF;
background-color: #5555FF;
}
@zahardev
Copy link

zahardev commented May 4, 2023

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment