Last active
December 8, 2021 05:53
-
-
Save WinterSilence/fd30b906e377eeb900419459da6efdfd to your computer and use it in GitHub Desktop.
SASS functions: merge-maps(), merge-lists(), get()
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
/// 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