Skip to content

Instantly share code, notes, and snippets.

@dobromir-hristov
Created October 7, 2020 12:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dobromir-hristov/9191f1b660e5bf5c463fec26d97b400d to your computer and use it in GitHub Desktop.
Save dobromir-hristov/9191f1b660e5bf5c463fec26d97b400d to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
$component-colors: (
links-item-border: (
default: links-item-border-default,
ide: links-item-border-ide
),
link-item-bg: (
default: (
light: link-item-bg-default-light,
dark: link-item-bg-default-dark,
),
ide: (
light: link-item-bg-ide-light,
dark: link-item-bg-ide-dark
)
)
);
@function get-color($args...){
$color-map: map-deep-get($component-colors, $args);
@if(type-of($color-map) != map) {
@return $color-map;
}
// if it has `default` key, get it, otherwise return $color-map
$color: map-get-default($color-map, default, $color-map);
// if its still a map, get the `light` variant
@if(type-of($color) == map) {
@return map-get($color, light);
}
// if its not a map, then we are ready to return
@return $color
}
@function map-deep-get($map, $keys, $default: null) {
$value: $map;
// Loop through every key except the last one, keeping track of each
// corresponding value in the map
@for $i from 1 to length($keys) {
$key: nth($keys, $i);
$value: map-get-default($value, $key, ());
}
// Return the value for the last key or a default value
@return map-get-default($value, nth($keys, -1), $default);
}
@function map-get-default($map, $key, $default) {
@return if(map-has-key($map, $key), map-get($map, $key), $default);
}
.thing {
color-only: get-color(links-item-border);
color-only-with-deep-map: get-color(link-item-bg);
color-mode: get-color(link-item-bg, default);
color-mode-ide: get-color(link-item-bg, ide);
color-mode-variant: get-color(link-item-bg, default, light);
}
.thing {
color-only: links-item-border-default;
color-only-with-deep-map: link-item-bg-default-light;
color-mode: link-item-bg-default-light;
color-mode-ide: link-item-bg-ide-light;
color-mode-variant: link-item-bg-default-light;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment