diff options
author | Feuerfuchs <git@feuerfuchs.dev> | 2020-11-01 20:55:14 +0100 |
---|---|---|
committer | Feuerfuchs <git@feuerfuchs.dev> | 2020-11-01 20:55:14 +0100 |
commit | d07f664450ddaaebb44127a4bd057763d13d3f82 (patch) | |
tree | 234cfd673ac527869a8dda4f32afbec48c87b512 /src/bem/_suffix.scss | |
download | iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.tar.gz iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.tar.bz2 iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.zip |
Init
Diffstat (limited to 'src/bem/_suffix.scss')
-rw-r--r-- | src/bem/_suffix.scss | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/src/bem/_suffix.scss b/src/bem/_suffix.scss new file mode 100644 index 0000000..b103c9f --- /dev/null +++ b/src/bem/_suffix.scss | |||
@@ -0,0 +1,118 @@ | |||
1 | //// | ||
2 | /// @group BEM | ||
3 | /// | ||
4 | /// @access public | ||
5 | //// | ||
6 | |||
7 | /// | ||
8 | /// Generate a new suffix. | ||
9 | /// | ||
10 | /// @param {string} $name - Suffix name | ||
11 | /// | ||
12 | /// @content | ||
13 | /// | ||
14 | /// @throw If the element is not preceded by a block or modifier. | ||
15 | /// | ||
16 | /// @example scss - Using a suffix | ||
17 | /// @include iro-bem-utility('hidden') { | ||
18 | /// display: none; | ||
19 | /// | ||
20 | /// @media (max-width: 320px) { | ||
21 | /// @include iro-bem-suffix('phone') { | ||
22 | /// display: none; | ||
23 | /// } | ||
24 | /// } | ||
25 | /// | ||
26 | /// @media (max-width: 768px) { | ||
27 | /// @include iro-bem-suffix('tablet') { | ||
28 | /// display: none; | ||
29 | /// } | ||
30 | /// } | ||
31 | /// } | ||
32 | /// | ||
33 | /// // Generates: | ||
34 | /// | ||
35 | /// .u-hidden { | ||
36 | /// display: none; | ||
37 | /// } | ||
38 | /// | ||
39 | /// @media (max-width: 320px) { | ||
40 | /// .u-hidden@phone { | ||
41 | /// display: none; | ||
42 | /// } | ||
43 | /// } | ||
44 | /// | ||
45 | /// @media (max-width: 768px) { | ||
46 | /// .u-hidden@tablet { | ||
47 | /// display: none; | ||
48 | /// } | ||
49 | /// } | ||
50 | /// | ||
51 | @mixin iro-bem-suffix($name) { | ||
52 | $result: iro-bem-suffix($name); | ||
53 | $selector: nth($result, 1); | ||
54 | $context: nth($result, 2); | ||
55 | |||
56 | @include iro-bem-validate( | ||
57 | 'suffix', | ||
58 | (name: $name), | ||
59 | $selector, | ||
60 | $context | ||
61 | ); | ||
62 | |||
63 | @include iro-context-push($iro-bem-context-id, $context...); | ||
64 | @at-root #{$selector} { | ||
65 | @content; | ||
66 | } | ||
67 | @include iro-context-pop($iro-bem-context-id); | ||
68 | } | ||
69 | |||
70 | /// | ||
71 | /// Generate a new suffix. Check the respective mixin documentation for more information. | ||
72 | /// | ||
73 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | ||
74 | /// | ||
75 | /// @see {mixin} iro-bem-suffix | ||
76 | /// | ||
77 | @function iro-bem-suffix($name) { | ||
78 | // | ||
79 | // Suffixes can be used on block, element and modifier. | ||
80 | // | ||
81 | |||
82 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | ||
83 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); | ||
84 | $noop: iro-context-assert-stack-must-not-contain($iro-bem-context-id, 'suffix'); | ||
85 | |||
86 | $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier'); | ||
87 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); | ||
88 | |||
89 | @if not iro-selector-suffix-match(&, $parent-selector) { | ||
90 | // | ||
91 | // The current selector doesn't match the parent selector. | ||
92 | // The user manually added a selector between parent context and this suffix call. | ||
93 | // This case is forbidden because any outcome semantically wouldn't make sense: | ||
94 | // - {b,e,m} [manual selector] {b,e,m}@suffix | ||
95 | // - {b,e,m}@suffix [manual selector] | ||
96 | // The first case would make the modifier behave like an element. | ||
97 | // The second case is unintuitive, the code would be more clear by nesting the manual | ||
98 | // selector in the suffix instead. | ||
99 | // | ||
100 | |||
101 | @error 'A suffix must be an immediate child of the parent context'; | ||
102 | } | ||
103 | |||
104 | // | ||
105 | // The suffix part can simply be appended. | ||
106 | // Possible outcomes: | ||
107 | // - {b,e,m}@suffix | ||
108 | // | ||
109 | |||
110 | $selector: selector-append(&, $iro-bem-suffix-separator + $name); | ||
111 | |||
112 | $context: 'suffix', ( | ||
113 | 'name': $name, | ||
114 | 'selector': $selector | ||
115 | ); | ||
116 | |||
117 | @return $selector $context; | ||
118 | } | ||