Skip to content

Instantly share code, notes, and snippets.

@WinterSilence
Last active December 8, 2021 05:53
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 WinterSilence/fd30b906e377eeb900419459da6efdfd to your computer and use it in GitHub Desktop.
Save WinterSilence/fd30b906e377eeb900419459da6efdfd to your computer and use it in GitHub Desktop.
SASS functions: merge-maps(), merge-lists(), get()
/// Merges maps or|and lists (optional).
///
/// @param {map | list} $map1 The first map
/// @param {map | list} $map2 The second map
/// @param {bool} $merge-lists Allow merge lists
/// @return {map | null} The new map or list or null at error
@function merge-maps($map1, $map2, $merge-lists: false) {
@if (type-of($map1) == map or (type-of($map1) == list and length($map1) == 0)) and (type-of($map2) == map or (type-of($map2) == list and length($map2) == 0)) {
$result: $map1;
@each $key, $value in $map2 {
@if (type-of(map-get($result, $key)) == map and type-of($value) == map) {
$result: map-merge($result, ($key: recursive-map-merge(map-get($result, $key), $value)));
}
@else if ($merge-lists and type-of(map-get($result, $key)) == list and type-of($value) == list) {
$result: map-merge($result, ($key: join(map-get($result, $key), $value)));
}
@else {
$result: map-merge($result, ($key: $value));
}
}
@return $result;
}
@warn "merge-maps() expects this parameters to be map types!";
@return null;
}
/// Merges lists.
///
/// @param {list} $list The first map
/// @param {list} ...$lists The lists to merge
/// @return {list} The new list
@function merge-lists($list, $lists...) {
$result: $list;
@each $list in $lists {
@each $value in $list {
@if not index($result, $value) {
$result: append($result, $value);
}
}
}
@return $result;
}
/// Gets map or list value by key.
///
/// @param {map} $map The source map
/// @param {string | number} $key The map key or list index
/// @return {mixed} The map value
@function get-value($map, $key) {
@if (type-of($map) != map and type-of($map) != list) {
@error "get-value(): invalid type of $map";
}
@if (type-of($key) != number or type-of($key) != string) {
@error "get-value(): invalid type of $key";
}
@if map-has-key($map, $key) {
@return map-get($map, $key);
}
@return map-get($map, quoted($key));
}
/// Returns color from map.
///
/// Example: `color: get-color("blue", "300"); background-color: get-color("green", 4);`
///
/// @param {string} $color Color name (`"red"`, `"gray"`)
/// @param {string | number} $index Color index (`"900"`, `900` or `9`)
/// @param {map} $color-maps Map of color maps
/// @return {color | null} Color or null
@function get-color($color, $index: "500", $maps: $color-maps) {
@if type-of($index) != string {
$index: quote(if ($index < 10, $index * 100, $index));
}
@return if (
map-has-key($maps, $color, $index),
map-get($maps, $color, $index),
null
);
}
/// Replaces or sets color and returns updated map.
///
/// Example: `$color-maps: set-color("green", "500", #0d9d1d);`
///
/// @param {string} $color Color name (`"red"`, `"green"`)
/// @param {string | number} $index Color index (`"900"`, `900` or `9`)
/// @param {color} $value New value (`#eee`, `#eeeeee` or `gray`)
/// @param {map} $maps Map of color maps
/// @return {map} New map
@function set-color($color, $index, $value, $maps: $color-maps) {
@if type-of($index) != string {
$index: quote(if ($index < 10, $index * 100, $index));
}
$map: map-merge(map-get($maps, $color), ($index: $value));
@return map-merge($maps, ($color: $map));
}
/// Gets shade or tint color.
///
/// @param {color} $color Base color
/// @param {number} $percentage Shade or tint
/// @param {color} $color-contrast-light White color
/// @return {color}
///
@function calc-color($color, $percentage: 15%, $color-contrast-light: #fff) {
@return if(
color-contrast($color) == $color-contrast-light,
shade-color($color, $percentage),
tint-color($color, $percentage)
);
}
/// Gets space size (padding or margin).
///
/// @param {int} $size the map key
/// @param {map} $spacers the map of element spaces
/// @return {string}
///
@function spacer($size: 2, $spacers: $spacers) {
@return map-get($spacers, $size);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment