Skip to content

Instantly share code, notes, and snippets.

@KittyGiraudel
Last active February 18, 2022 08:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save KittyGiraudel/b08c622ddd819429a12e to your computer and use it in GitHub Desktop.
Save KittyGiraudel/b08c622ddd819429a12e to your computer and use it in GitHub Desktop.
/// This function is exactly like `map-get` except it goes deeper.
/// You pass the map as first argument and then an unlimited number of keys to be accessed.
/// If a key cannot be reached, the function aborts and returns `null`.
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
@if (type-of($map) == 'null') { @return $map; }
}
@return $map;
}
/// This function is just a wrapper for `map-deep-get`.
/// What is does is that if `map-deep-get` returns `null` for some reason,
/// then it throws an error. Basically what you wanted I believe.
@function color-palette($keys...) {
$color: map-deep-get($color-palette, $keys...);
@if not $color {
@error 'Could not find color for: #{$keys}';
}
@return $color;
}
$theme-color-1: #ff6600;
$theme-color-2: #000000;
$color-palette: (
'theme-1': (
'base': $theme-color-1,
'10pc': rgba($theme-color-1, 0.1),
'25pc': rgba($theme-color-1, 0.25)
),
'theme-2': (
'base': $theme-color-2,
'10pc': rgba($theme-color-2, 0.1),
'25pc': rgba($theme-color-2, 0.25)
),
);
.side-nav {
.theme-1 & {
background-color: color-palette('theme-1', '10pc');
color: color-palette('theme-1', '25pc');
}
.theme-2 & {
background-color: color-palette('theme-2', '10pc');
color: color-palette('theme-2', 'FOOBAR');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment