-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_name.function.scss
120 lines (98 loc) · 4.87 KB
/
_name.function.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// Sass.
@use 'sass:list';
// Variables.
@use '../variables';
// Functions.
@use '../list/list.extract-map.function' as list-extract-map;
@use '../list/remove/remove.map.function' as list-remove-map;
@use '../map/map.deep-merge.function' as map-deep-merge;
@use '../map/map.get.function' as map-get;
@use '../map/map.pick.function' as map-pick;
@use '../map/map.remove.function' as map-remove;
@use '../map/map.values.function' as map-values;
@use '../string/string.join.function';
@use '../values/values.combine.function';
// Status: DONE
// The `name()` function defines name from the given list and `$dictionary`, separated by `$delimiter`.
// @param `$dictionary`
// @param `$delimiter`
// @param `$prefix`
// @param `$suffix`
// @param `$config`
// @returns
@function name(
$name,
$dictionary: (),
$delimiter: null,
$prefix: null,
$suffix: null,
$config: variables.$name-configuration,
) {
$delimiter: if(list.length($delimiter) == 0, null, $delimiter);
// Get dictionary extracted from the list.
$extracted-map: map-get.get(list-extract-map.extract-map($name), map, ());
// Remove the map from the `$name`.
$name: list-remove-map.map($name);
// Merge extracted map dictionary with the `$dictionary`.
$dictionary: map-deep-merge.deep-merge($dictionary, map-get.get($extracted-map, dictionary, $extracted-map));
// Add `$delimiter`, `$prefix` and `$suffix` to the `$dictionary`.
$dictionary: map-deep-merge.deep-merge((
map-get.get($config, prefix, prefix): $prefix,
map-get.get($config, delimiter, delimiter): $delimiter,
map-get.get($config, suffix, suffix): $suffix
),
$dictionary
);
// Name structure.
$name: map-values.values(
map-pick.pick($dictionary, prefix, suffix),
values.combine((method: join), map-get.get($config, prefix, prefix), $name, map-get.get($config, suffix, suffix))...
);
// Translate + add delimiter.
$name: values.combine(
(method: join, delimiter: map-get.get($config, delimiter, delimiter)),
map-values.values(map-remove.remove($dictionary, prefix, suffix), $name...)...
);
// Translate delimiter.
$name: map-values.values(map-pick.pick($dictionary, delimiter), $name...);
// Join list elements to the string.
@return string.join('', $name...);
}
// Examples.
// Default
// @debug name(border width); // borderwidth
// Size extra large.
// @debug name(border width (extra large)); // borderwidthextralarge
// Translated size extra large to xl by `$dictionary` argument.
// @debug name(border width (extra large), (extra large: xl)); // borderwidthxl
// Translated size extra large to xl by the map in the `$name` argument.
// @debug name(border width (extra large) (extra large: xl)); // borderwidthxl
// Delimiter.
// @debug name(border width, $delimiter: '-'); // border-width
// @debug name(border width '', $delimiter: '-'); // border-width-
// @debug name('' border width, $delimiter: '-'); // -border-width
// @debug name('' border width '', $delimiter: '-'); // -border-width-
// Delimiter + dictionary.
// @debug name(border width (extra large), (extra large: xl), '-'); // border-width-xl
// Delimiter + `$prefix` + `$suffix`.
// @debug name(border width, $delimiter: '-', $prefix: spectre, $suffix: large); // spectre-border-width-large
// @debug name(border width, $delimiter: '-', $prefix: spectre basic, $suffix: extra large); // spectre-basic-border-width-extra-large
// Dictionary + delimiter + prefix and suffix of the `$dictionary`.
// @debug name(border width, (prefix: spectre basic, extra large: xl), $delimiter: '-', $prefix: spectre, $suffix: extra large); // spectre-basic-border-width-xl
// @debug name(border width, (prefix: spectre basic, suffix: extra large), $delimiter: '-', $prefix: spectre, $suffix: large); // spectre-basic-border-width-extra-large
// Dictionary in the name as map.
// @debug name(border (prefix: spectre) width large, (), '-'); // spectre-border-width-large
// @debug name(border width, (prefix: s, suffix: lg), '-'); // s-border-width-lg
// @debug name(border width lg, (prefix: s), '-'); // s-border-width-lg
// @debug name(border (dictionary: ('prefix': 'spectre')) width lg, (), '-'); // spectre-border-width-lg
// @debug name(border width (extra large), (prefix: a, border: b, b: 1, delimiter: '-', suffix: b, extra large: xl)); // a-b-width-xl-1
// Change the prefix and suffix in the structure name.
// @debug name(border width 20, $delimiter: '-', $prefix: prefix-modified, $suffix: suffix-modified, $config: (prefix: prx)); // prefix-modified-border-width-20-suffix-modified
// @debug name(border width 20, (prx: prx), $delimiter: '-', $prefix: prefix-modified, $suffix: suffix-modified, $config: (prefix: prx)); // prx-border-width-20-suffix-modified
// @debug name(
// (extra small) border width,
// (border: b, b: test, prefix: spectre basic, suffix: extra large, extra large: xl, extra small: xs),
// '-',
// spectre,
// large
// ); // spectre-basic-xs-b-width-xl