diff options
author | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
commit | dd5f3c463fab336d694f426dcad11a1783590fc9 (patch) | |
tree | faebf738a9556eaa393371852ed86550d4adf66a /src/bem | |
parent | Fix errors from transition from node-sass to sass (diff) | |
download | iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.gz iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.bz2 iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.zip |
Ported from import syntax to modules
Diffstat (limited to 'src/bem')
-rw-r--r-- | src/bem/_block.scss | 166 | ||||
-rw-r--r-- | src/bem/_debug.scss | 8 | ||||
-rw-r--r-- | src/bem/_element.scss | 191 | ||||
-rw-r--r-- | src/bem/_functions.scss | 6 | ||||
-rw-r--r-- | src/bem/_modifier.scss | 63 | ||||
-rw-r--r-- | src/bem/_multi.scss | 56 | ||||
-rw-r--r-- | src/bem/_state.scss | 50 | ||||
-rw-r--r-- | src/bem/_suffix.scss | 37 | ||||
-rw-r--r-- | src/bem/_theme.scss | 27 | ||||
-rw-r--r-- | src/bem/_validators.scss | 68 | ||||
-rw-r--r-- | src/bem/_vars.scss | 20 |
11 files changed, 373 insertions, 319 deletions
diff --git a/src/bem/_block.scss b/src/bem/_block.scss index d065891..49af04b 100644 --- a/src/bem/_block.scss +++ b/src/bem/_block.scss | |||
@@ -4,6 +4,12 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @use './validators'; | ||
8 | @use './vars'; | ||
9 | @use './functions' as bemfunctions; | ||
10 | @use '../functions'; | ||
11 | @use '../contexts'; | ||
12 | |||
7 | /// | 13 | /// |
8 | /// Generate a new block. | 14 | /// Generate a new block. |
9 | /// | 15 | /// |
@@ -20,7 +26,7 @@ | |||
20 | /// @throw If the block is preceded by another block, element, modifier or suffix | 26 | /// @throw If the block is preceded by another block, element, modifier or suffix |
21 | /// | 27 | /// |
22 | /// @example scss - Creating a new block | 28 | /// @example scss - Creating a new block |
23 | /// @include iro-bem-block('something', 'component') { | 29 | /// @include block('something', 'component') { |
24 | /// /* some definitions */ | 30 | /// /* some definitions */ |
25 | /// } | 31 | /// } |
26 | /// | 32 | /// |
@@ -30,12 +36,12 @@ | |||
30 | /// /* some definitions */ | 36 | /// /* some definitions */ |
31 | /// } | 37 | /// } |
32 | /// | 38 | /// |
33 | @mixin iro-bem-block($name, $type: null) { | 39 | @mixin block($name, $type: null) { |
34 | $result: iro-bem-block($name, $type); | 40 | $result: block($name, $type); |
35 | $selector: nth($result, 1); | 41 | $selector: nth($result, 1); |
36 | $context: nth($result, 2); | 42 | $context: nth($result, 2); |
37 | 43 | ||
38 | @include iro-bem-validate( | 44 | @include validators.validate( |
39 | 'block', | 45 | 'block', |
40 | (name: $name, type: $type), | 46 | (name: $name, type: $type), |
41 | $selector, | 47 | $selector, |
@@ -43,16 +49,16 @@ | |||
43 | ); | 49 | ); |
44 | 50 | ||
45 | @if $type != null { | 51 | @if $type != null { |
46 | $iro-bem-blocks: append($iro-bem-blocks, $name + '_' + $type) !global; | 52 | vars.$blocks: append(vars.$blocks, $name + '_' + $type); |
47 | } @else { | 53 | } @else { |
48 | $iro-bem-blocks: append($iro-bem-blocks, $name) !global; | 54 | vars.$blocks: append(vars.$blocks, $name); |
49 | } | 55 | } |
50 | 56 | ||
51 | @include iro-context-push($iro-bem-context-id, $context...); | 57 | @include contexts.push(vars.$context-id, $context...); |
52 | @at-root #{$selector} { | 58 | @at-root #{$selector} { |
53 | @content; | 59 | @content; |
54 | } | 60 | } |
55 | @include iro-context-pop($iro-bem-context-id); | 61 | @include contexts.pop(vars.$context-id); |
56 | } | 62 | } |
57 | 63 | ||
58 | /// | 64 | /// |
@@ -60,21 +66,21 @@ | |||
60 | /// | 66 | /// |
61 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 67 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
62 | /// | 68 | /// |
63 | /// @see {mixin} iro-bem-block | 69 | /// @see {mixin} block |
64 | /// | 70 | /// |
65 | @function iro-bem-block($name, $type: null) { | 71 | @function block($name, $type: null) { |
66 | // | 72 | // |
67 | // Possible outcomes: | 73 | // Possible outcomes: |
68 | // - ({b,e,m,s}) block | 74 | // - ({b,e,m,s}) block |
69 | // | 75 | // |
70 | 76 | ||
71 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 77 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
72 | 78 | ||
73 | $selector: null; | 79 | $selector: null; |
74 | $base-selector: null; | 80 | $base-selector: null; |
75 | 81 | ||
76 | @if $type != null { | 82 | @if $type != null { |
77 | $namespace: map-get($iro-bem-namespaces, $type); | 83 | $namespace: map-get(vars.$namespaces, $type); |
78 | 84 | ||
79 | @if not $namespace { | 85 | @if not $namespace { |
80 | @error '"#{$type}" is not a valid type.'; | 86 | @error '"#{$type}" is not a valid type.'; |
@@ -85,7 +91,7 @@ | |||
85 | @if $type != 'theme' or & { | 91 | @if $type != 'theme' or & { |
86 | $selector: $base-selector; | 92 | $selector: $base-selector; |
87 | } @else if not & { | 93 | } @else if not & { |
88 | $selector: iro-bem-theme-selector($name); | 94 | $selector: bemfunctions.theme-selector($name); |
89 | } | 95 | } |
90 | } @else { | 96 | } @else { |
91 | $base-selector: selector-parse('.' + $name); | 97 | $base-selector: selector-parse('.' + $name); |
@@ -107,14 +113,14 @@ | |||
107 | } | 113 | } |
108 | 114 | ||
109 | /// | 115 | /// |
110 | /// Generate a new object block. It's a shorthand for iro-bem-block($name, 'object'). | 116 | /// Generate a new object block. It's a shorthand for block($name, 'object'). |
111 | /// | 117 | /// |
112 | /// @param {string} $name - Object block name | 118 | /// @param {string} $name - Object block name |
113 | /// | 119 | /// |
114 | /// @content | 120 | /// @content |
115 | /// | 121 | /// |
116 | @mixin iro-bem-object($name) { | 122 | @mixin object($name) { |
117 | @include iro-bem-block($name, 'object') { | 123 | @include block($name, 'object') { |
118 | @content; | 124 | @content; |
119 | } | 125 | } |
120 | } | 126 | } |
@@ -124,21 +130,21 @@ | |||
124 | /// | 130 | /// |
125 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 131 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
126 | /// | 132 | /// |
127 | /// @see {mixin} iro-bem-object | 133 | /// @see {mixin} object |
128 | /// | 134 | /// |
129 | @function iro-bem-object($name) { | 135 | @function object($name) { |
130 | @return iro-bem-block($name, 'object'); | 136 | @return block($name, 'object'); |
131 | } | 137 | } |
132 | 138 | ||
133 | /// | 139 | /// |
134 | /// Generate a new component block. It's a shorthand for iro-bem-block($name, 'component'). | 140 | /// Generate a new component block. It's a shorthand for block($name, 'component'). |
135 | /// | 141 | /// |
136 | /// @param {string} $name - Component block name | 142 | /// @param {string} $name - Component block name |
137 | /// | 143 | /// |
138 | /// @content | 144 | /// @content |
139 | /// | 145 | /// |
140 | @mixin iro-bem-component($name) { | 146 | @mixin component($name) { |
141 | @include iro-bem-block($name, 'component') { | 147 | @include block($name, 'component') { |
142 | @content; | 148 | @content; |
143 | } | 149 | } |
144 | } | 150 | } |
@@ -148,21 +154,21 @@ | |||
148 | /// | 154 | /// |
149 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 155 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
150 | /// | 156 | /// |
151 | /// @see {mixin} iro-bem-component | 157 | /// @see {mixin} component |
152 | /// | 158 | /// |
153 | @function iro-bem-component($name) { | 159 | @function component($name) { |
154 | @return iro-bem-block($name, 'component'); | 160 | @return block($name, 'component'); |
155 | } | 161 | } |
156 | 162 | ||
157 | /// | 163 | /// |
158 | /// Generate a new layout block. It's a shorthand for iro-bem-block($name, 'layout'). | 164 | /// Generate a new layout block. It's a shorthand for block($name, 'layout'). |
159 | /// | 165 | /// |
160 | /// @param {string} $name - Layout block name | 166 | /// @param {string} $name - Layout block name |
161 | /// | 167 | /// |
162 | /// @content | 168 | /// @content |
163 | /// | 169 | /// |
164 | @mixin iro-bem-layout($name) { | 170 | @mixin layout($name) { |
165 | @include iro-bem-block($name, 'layout') { | 171 | @include block($name, 'layout') { |
166 | @content; | 172 | @content; |
167 | } | 173 | } |
168 | } | 174 | } |
@@ -172,21 +178,21 @@ | |||
172 | /// | 178 | /// |
173 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 179 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
174 | /// | 180 | /// |
175 | /// @see {mixin} iro-bem-layout | 181 | /// @see {mixin} layout |
176 | /// | 182 | /// |
177 | @function iro-bem-layout($name) { | 183 | @function layout($name) { |
178 | @return iro-bem-block($name, 'layout'); | 184 | @return block($name, 'layout'); |
179 | } | 185 | } |
180 | 186 | ||
181 | /// | 187 | /// |
182 | /// Generate a new utility block. It's a shorthand for iro-bem-block($name, 'utility'). | 188 | /// Generate a new utility block. It's a shorthand for block($name, 'utility'). |
183 | /// | 189 | /// |
184 | /// @param {string} $name - Utility block name | 190 | /// @param {string} $name - Utility block name |
185 | /// | 191 | /// |
186 | /// @content | 192 | /// @content |
187 | /// | 193 | /// |
188 | @mixin iro-bem-utility($name) { | 194 | @mixin utility($name) { |
189 | @include iro-bem-block($name, 'utility') { | 195 | @include block($name, 'utility') { |
190 | @content; | 196 | @content; |
191 | } | 197 | } |
192 | } | 198 | } |
@@ -196,21 +202,21 @@ | |||
196 | /// | 202 | /// |
197 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 203 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
198 | /// | 204 | /// |
199 | /// @see {mixin} iro-bem-utility | 205 | /// @see {mixin} utility |
200 | /// | 206 | /// |
201 | @function iro-bem-utility($name) { | 207 | @function utility($name) { |
202 | @return iro-bem-block($name, 'utility'); | 208 | @return block($name, 'utility'); |
203 | } | 209 | } |
204 | 210 | ||
205 | /// | 211 | /// |
206 | /// Generate a new scope block. It's a shorthand for iro-bem-block($name, 'scope'). | 212 | /// Generate a new scope block. It's a shorthand for block($name, 'scope'). |
207 | /// | 213 | /// |
208 | /// @param {string} $name - Scope block name | 214 | /// @param {string} $name - Scope block name |
209 | /// | 215 | /// |
210 | /// @content | 216 | /// @content |
211 | /// | 217 | /// |
212 | @mixin iro-bem-scope($name) { | 218 | @mixin scope($name) { |
213 | @include iro-bem-block($name, 'scope') { | 219 | @include block($name, 'scope') { |
214 | @content; | 220 | @content; |
215 | } | 221 | } |
216 | } | 222 | } |
@@ -220,21 +226,21 @@ | |||
220 | /// | 226 | /// |
221 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 227 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
222 | /// | 228 | /// |
223 | /// @see {mixin} iro-bem-scope | 229 | /// @see {mixin} scope |
224 | /// | 230 | /// |
225 | @function iro-bem-scope($name) { | 231 | @function scope($name) { |
226 | @return iro-bem-block($name, 'scope'); | 232 | @return block($name, 'scope'); |
227 | } | 233 | } |
228 | 234 | ||
229 | /// | 235 | /// |
230 | /// Generate a new theme block. It's a shorthand for iro-bem-block($name, 'theme'). | 236 | /// Generate a new theme block. It's a shorthand for block($name, 'theme'). |
231 | /// | 237 | /// |
232 | /// @param {string} $name - Theme block name | 238 | /// @param {string} $name - Theme block name |
233 | /// | 239 | /// |
234 | /// @content | 240 | /// @content |
235 | /// | 241 | /// |
236 | @mixin iro-bem-theme($name) { | 242 | @mixin theme($name) { |
237 | @include iro-bem-block($name, 'theme') { | 243 | @include block($name, 'theme') { |
238 | @content; | 244 | @content; |
239 | } | 245 | } |
240 | } | 246 | } |
@@ -244,21 +250,21 @@ | |||
244 | /// | 250 | /// |
245 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 251 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
246 | /// | 252 | /// |
247 | /// @see {mixin} iro-bem-theme | 253 | /// @see {mixin} theme |
248 | /// | 254 | /// |
249 | @function iro-bem-theme($name) { | 255 | @function theme($name) { |
250 | @return iro-bem-block($name, 'theme'); | 256 | @return block($name, 'theme'); |
251 | } | 257 | } |
252 | 258 | ||
253 | /// | 259 | /// |
254 | /// Generate a new JS block. It's a shorthand for iro-bem-block($name, 'js'). | 260 | /// Generate a new JS block. It's a shorthand for block($name, 'js'). |
255 | /// | 261 | /// |
256 | /// @param {string} $name - JS block name | 262 | /// @param {string} $name - JS block name |
257 | /// | 263 | /// |
258 | /// @content | 264 | /// @content |
259 | /// | 265 | /// |
260 | @mixin iro-bem-js($name) { | 266 | @mixin js($name) { |
261 | @include iro-bem-block($name, 'js') { | 267 | @include block($name, 'js') { |
262 | @content; | 268 | @content; |
263 | } | 269 | } |
264 | } | 270 | } |
@@ -268,21 +274,21 @@ | |||
268 | /// | 274 | /// |
269 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 275 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
270 | /// | 276 | /// |
271 | /// @see {mixin} iro-bem-js | 277 | /// @see {mixin} js |
272 | /// | 278 | /// |
273 | @function iro-bem-js($name) { | 279 | @function js($name) { |
274 | @return iro-bem-block($name, 'js'); | 280 | @return block($name, 'js'); |
275 | } | 281 | } |
276 | 282 | ||
277 | /// | 283 | /// |
278 | /// Generate a new QA block. It's a shorthand for iro-bem-block($name, 'qa'). | 284 | /// Generate a new QA block. It's a shorthand for block($name, 'qa'). |
279 | /// | 285 | /// |
280 | /// @param {string} $name - QA block name | 286 | /// @param {string} $name - QA block name |
281 | /// | 287 | /// |
282 | /// @content | 288 | /// @content |
283 | /// | 289 | /// |
284 | @mixin iro-bem-qa($name) { | 290 | @mixin qa($name) { |
285 | @include iro-bem-block($name, 'qa') { | 291 | @include block($name, 'qa') { |
286 | @content; | 292 | @content; |
287 | } | 293 | } |
288 | } | 294 | } |
@@ -292,21 +298,21 @@ | |||
292 | /// | 298 | /// |
293 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 299 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
294 | /// | 300 | /// |
295 | /// @see {mixin} iro-bem-qa | 301 | /// @see {mixin} qa |
296 | /// | 302 | /// |
297 | @function iro-bem-qa($name) { | 303 | @function qa($name) { |
298 | @return iro-bem-block($name, 'qa'); | 304 | @return block($name, 'qa'); |
299 | } | 305 | } |
300 | 306 | ||
301 | /// | 307 | /// |
302 | /// Generate a new hack block. It's a shorthand for iro-bem-block($name, 'hack'). | 308 | /// Generate a new hack block. It's a shorthand for block($name, 'hack'). |
303 | /// | 309 | /// |
304 | /// @param {string} $name - Hack block name | 310 | /// @param {string} $name - Hack block name |
305 | /// | 311 | /// |
306 | /// @content | 312 | /// @content |
307 | /// | 313 | /// |
308 | @mixin iro-bem-hack($name) { | 314 | @mixin hack($name) { |
309 | @include iro-bem-block($name, 'hack') { | 315 | @include block($name, 'hack') { |
310 | @content; | 316 | @content; |
311 | } | 317 | } |
312 | } | 318 | } |
@@ -316,10 +322,10 @@ | |||
316 | /// | 322 | /// |
317 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 323 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
318 | /// | 324 | /// |
319 | /// @see {mixin} iro-bem-hack | 325 | /// @see {mixin} hack |
320 | /// | 326 | /// |
321 | @function iro-bem-hack($name) { | 327 | @function hack($name) { |
322 | @return iro-bem-block($name, 'hack'); | 328 | @return block($name, 'hack'); |
323 | } | 329 | } |
324 | 330 | ||
325 | /// | 331 | /// |
@@ -337,15 +343,15 @@ | |||
337 | /// @throw If a block doesn't exist | 343 | /// @throw If a block doesn't exist |
338 | /// | 344 | /// |
339 | /// @example scss - Successful assertion | 345 | /// @example scss - Successful assertion |
340 | /// @include iro-bem-component('someBlock') { | 346 | /// @include component('someBlock') { |
341 | /// /* some definitions */ | 347 | /// /* some definitions */ |
342 | /// } | 348 | /// } |
343 | /// | 349 | /// |
344 | /// @include iro-bem-component('anotherBlock') { | 350 | /// @include component('anotherBlock') { |
345 | /// /* some definitions */ | 351 | /// /* some definitions */ |
346 | /// | 352 | /// |
347 | /// @include iro-bem-element('elem') { | 353 | /// @include elem('elem') { |
348 | /// @include iro-bem-composed-of('someBlock' 'component'); | 354 | /// @include composed-of('someBlock' 'component'); |
349 | /// | 355 | /// |
350 | /// /* some definitions */ | 356 | /// /* some definitions */ |
351 | /// } | 357 | /// } |
@@ -354,37 +360,37 @@ | |||
354 | /// // Intended use: <div class="c-anotherBlock__elem c-someBlock">...</div> | 360 | /// // Intended use: <div class="c-anotherBlock__elem c-someBlock">...</div> |
355 | /// | 361 | /// |
356 | /// @example scss - Failing assertion | 362 | /// @example scss - Failing assertion |
357 | /// @include iro-bem-component('anotherBlock') { | 363 | /// @include component('anotherBlock') { |
358 | /// /* some definitions */ | 364 | /// /* some definitions */ |
359 | /// | 365 | /// |
360 | /// @include iro-bem-element('elem') { | 366 | /// @include elem('elem') { |
361 | /// @include iro-bem-composed-of('someBlock' 'component'); | 367 | /// @include composed-of('someBlock' 'component'); |
362 | /// | 368 | /// |
363 | /// /* some definitions */ | 369 | /// /* some definitions */ |
364 | /// } | 370 | /// } |
365 | /// } | 371 | /// } |
366 | /// | 372 | /// |
367 | /// @include iro-bem-component('someBlock') { | 373 | /// @include component('someBlock') { |
368 | /// /* some definitions */ | 374 | /// /* some definitions */ |
369 | /// } | 375 | /// } |
370 | /// | 376 | /// |
371 | /// // Compilation will fail because c-someBlock is defined after c-anotherBlock__elem | 377 | /// // Compilation will fail because c-someBlock is defined after c-anotherBlock__elem |
372 | /// | 378 | /// |
373 | @mixin iro-bem-composed-of($block, $blocks...) { | 379 | @mixin composed-of($block, $blocks...) { |
374 | @each $block in iro-list-prepend($blocks, $block) { | 380 | @each $block in functions.list-prepend($blocks, $block) { |
375 | @if type-of($block) == string { | 381 | @if type-of($block) == string { |
376 | @if not index($iro-bem-blocks, $block) { | 382 | @if not index(vars.$blocks, $block) { |
377 | @error 'Block "#{$block}" does not exist.'; | 383 | @error 'Block "#{$block}" does not exist.'; |
378 | } | 384 | } |
379 | } @else { | 385 | } @else { |
380 | $name: nth($block, 1); | 386 | $name: nth($block, 1); |
381 | $type: nth($block, 2); | 387 | $type: nth($block, 2); |
382 | 388 | ||
383 | @if not map-get($iro-bem-namespaces, $type) { | 389 | @if not map-get(vars.$namespaces, $type) { |
384 | @error '"#{$type}" is not a valid type.'; | 390 | @error '"#{$type}" is not a valid type.'; |
385 | } | 391 | } |
386 | 392 | ||
387 | @if not index($iro-bem-blocks, $name + '_' + $type) { | 393 | @if not index(vars.$blocks, $name + '_' + $type) { |
388 | @error 'Block "#{$name}" does not exist.'; | 394 | @error 'Block "#{$name}" does not exist.'; |
389 | } | 395 | } |
390 | } | 396 | } |
diff --git a/src/bem/_debug.scss b/src/bem/_debug.scss index e69083c..8ea0f05 100644 --- a/src/bem/_debug.scss +++ b/src/bem/_debug.scss | |||
@@ -4,9 +4,11 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @if $iro-bem-debug { | 7 | @use './vars'; |
8 | @each $type, $color in $iro-bem-debug-colors { | 8 | |
9 | $namespace: map-get($iro-bem-namespaces, $type); | 9 | @if vars.$debug { |
10 | @each $type, $color in vars.$debug-colors { | ||
11 | $namespace: map-get(vars.$namespaces, $type); | ||
10 | 12 | ||
11 | [class^='#{$namespace}-'], | 13 | [class^='#{$namespace}-'], |
12 | [class*=' #{$namespace}-'] { | 14 | [class*=' #{$namespace}-'] { |
diff --git a/src/bem/_element.scss b/src/bem/_element.scss index b3d2fee..84e85fb 100644 --- a/src/bem/_element.scss +++ b/src/bem/_element.scss | |||
@@ -4,6 +4,11 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @use './validators'; | ||
8 | @use './vars'; | ||
9 | @use '../functions'; | ||
10 | @use '../contexts'; | ||
11 | |||
7 | /// | 12 | /// |
8 | /// Generate a new BEM element. | 13 | /// Generate a new BEM element. |
9 | /// | 14 | /// |
@@ -20,10 +25,10 @@ | |||
20 | /// @throw If the element is not preceded by a block, element, modifier or suffix. | 25 | /// @throw If the element is not preceded by a block, element, modifier or suffix. |
21 | /// | 26 | /// |
22 | /// @example scss - Element for a block | 27 | /// @example scss - Element for a block |
23 | /// @include iro-bem-component('block') { | 28 | /// @include component('block') { |
24 | /// /* some block definitions */ | 29 | /// /* some block definitions */ |
25 | /// | 30 | /// |
26 | /// @include iro-bem-element('elem') { | 31 | /// @include elem('elem') { |
27 | /// /* some element definitions */ | 32 | /// /* some element definitions */ |
28 | /// } | 33 | /// } |
29 | /// } | 34 | /// } |
@@ -39,15 +44,15 @@ | |||
39 | /// } | 44 | /// } |
40 | /// | 45 | /// |
41 | /// @example scss - Element that is affected by the user hovering the block | 46 | /// @example scss - Element that is affected by the user hovering the block |
42 | /// @include iro-bem-component('block') { | 47 | /// @include component('block') { |
43 | /// /* some block definitions */ | 48 | /// /* some block definitions */ |
44 | /// | 49 | /// |
45 | /// @include iro-bem-element('elem') { | 50 | /// @include elem('elem') { |
46 | /// background-color: #eee; | 51 | /// background-color: #eee; |
47 | /// } | 52 | /// } |
48 | /// | 53 | /// |
49 | /// &:hover { | 54 | /// &:hover { |
50 | /// @include iro-bem-element('elem') { | 55 | /// @include elem('elem') { |
51 | /// background-color: #000; | 56 | /// background-color: #000; |
52 | /// } | 57 | /// } |
53 | /// } | 58 | /// } |
@@ -68,10 +73,10 @@ | |||
68 | /// } | 73 | /// } |
69 | /// | 74 | /// |
70 | /// @example scss - Multiple elements | 75 | /// @example scss - Multiple elements |
71 | /// @include iro-bem-component('block') { | 76 | /// @include component('block') { |
72 | /// /* some block definitions */ | 77 | /// /* some block definitions */ |
73 | /// | 78 | /// |
74 | /// @include iro-bem-element('elem1', 'elem2') { | 79 | /// @include elem('elem1', 'elem2') { |
75 | /// /* some element definitions */ | 80 | /// /* some element definitions */ |
76 | /// } | 81 | /// } |
77 | /// } | 82 | /// } |
@@ -86,23 +91,23 @@ | |||
86 | /// /* some element definitions */ | 91 | /// /* some element definitions */ |
87 | /// } | 92 | /// } |
88 | /// | 93 | /// |
89 | @mixin iro-bem-element($name, $names...) { | 94 | @mixin elem($name, $names...) { |
90 | $result: iro-bem-element($name, $names...); | 95 | $result: elem($name, $names...); |
91 | $selector: nth($result, 1); | 96 | $selector: nth($result, 1); |
92 | $context: nth($result, 2); | 97 | $context: nth($result, 2); |
93 | 98 | ||
94 | @include iro-bem-validate( | 99 | @include validators.validate( |
95 | 'element', | 100 | 'element', |
96 | (name: $name, names: $names), | 101 | (name: $name, names: $names), |
97 | $selector, | 102 | $selector, |
98 | $context | 103 | $context |
99 | ); | 104 | ); |
100 | 105 | ||
101 | @include iro-context-push($iro-bem-context-id, $context...); | 106 | @include contexts.push(vars.$context-id, $context...); |
102 | @at-root #{$selector} { | 107 | @at-root #{$selector} { |
103 | @content; | 108 | @content; |
104 | } | 109 | } |
105 | @include iro-context-pop($iro-bem-context-id); | 110 | @include contexts.pop(vars.$context-id); |
106 | } | 111 | } |
107 | 112 | ||
108 | /// | 113 | /// |
@@ -110,26 +115,26 @@ | |||
110 | /// | 115 | /// |
111 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 116 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
112 | /// | 117 | /// |
113 | /// @see {mixin} iro-bem-element | 118 | /// @see {mixin} element |
114 | /// | 119 | /// |
115 | @function iro-bem-element($name, $names...) { | 120 | @function elem($name, $names...) { |
116 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 121 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
117 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); | 122 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); |
118 | 123 | ||
119 | $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element'); | 124 | $parent-context: contexts.get(vars.$context-id, 'block' 'element'); |
120 | 125 | ||
121 | $selector: (); | 126 | $selector: (); |
122 | $parts-data: (); | 127 | $parts-data: (); |
123 | 128 | ||
124 | @if nth($parent-context, 1) == 'element' { | 129 | @if nth($parent-context, 1) == 'element' { |
125 | @if $iro-bem-element-nesting-policy == 'disallow' { | 130 | @if vars.$element-nesting-policy == 'disallow' { |
126 | @error 'Element nesting is forbidden.'; | 131 | @error 'Element nesting is forbidden.'; |
127 | } | 132 | } |
128 | 133 | ||
129 | @if $iro-bem-element-nesting-policy == 'append' { | 134 | @if vars.$element-nesting-policy == 'append' { |
130 | $element-selector: map-get(nth($parent-context, 2), 'selector'); | 135 | $element-selector: map-get(nth($parent-context, 2), 'selector'); |
131 | 136 | ||
132 | @if not iro-selector-suffix-match(&, $element-selector) { | 137 | @if not functions.selector-suffix-match(&, $element-selector) { |
133 | @error 'A nested element must be an immediate children of the parent element.'; | 138 | @error 'A nested element must be an immediate children of the parent element.'; |
134 | } | 139 | } |
135 | 140 | ||
@@ -140,7 +145,7 @@ | |||
140 | // | 145 | // |
141 | 146 | ||
142 | @each $name in join($name, $names) { | 147 | @each $name in join($name, $names) { |
143 | $sel: selector-append(&, $iro-bem-element-separator + $name); | 148 | $sel: selector-append(&, vars.$element-separator + $name); |
144 | $selector: join($selector, $sel, comma); | 149 | $selector: join($selector, $sel, comma); |
145 | $parts-data: append($parts-data, ( | 150 | $parts-data: append($parts-data, ( |
146 | 'name': $name, | 151 | 'name': $name, |
@@ -149,13 +154,13 @@ | |||
149 | } | 154 | } |
150 | } | 155 | } |
151 | 156 | ||
152 | $parent-context: iro-context-get($iro-bem-context-id, 'block'); | 157 | $parent-context: contexts.get(vars.$context-id, 'block'); |
153 | } | 158 | } |
154 | 159 | ||
155 | @if length($selector) == 0 { | 160 | @if length($selector) == 0 { |
156 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); | 161 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); |
157 | 162 | ||
158 | @if iro-selector-suffix-match(&, $parent-selector) { | 163 | @if functions.selector-suffix-match(&, $parent-selector) { |
159 | // | 164 | // |
160 | // Possible outcomes: | 165 | // Possible outcomes: |
161 | // - {b}__element | 166 | // - {b}__element |
@@ -163,7 +168,7 @@ | |||
163 | // | 168 | // |
164 | 169 | ||
165 | @each $name in join($name, $names) { | 170 | @each $name in join($name, $names) { |
166 | $sel: selector-append(&, $iro-bem-element-separator + $name); | 171 | $sel: selector-append(&, vars.$element-separator + $name); |
167 | $selector: join($selector, $sel, comma); | 172 | $selector: join($selector, $sel, comma); |
168 | $parts-data: append($parts-data, ( | 173 | $parts-data: append($parts-data, ( |
169 | 'name': $name, | 174 | 'name': $name, |
@@ -178,13 +183,13 @@ | |||
178 | // | 183 | // |
179 | 184 | ||
180 | @if nth($parent-context, 1) != 'block' { | 185 | @if nth($parent-context, 1) != 'block' { |
181 | $parent-context: iro-context-get($iro-bem-context-id, 'block'); | 186 | $parent-context: contexts.get(vars.$context-id, 'block'); |
182 | } | 187 | } |
183 | 188 | ||
184 | $block-base-selector: map-get(nth($parent-context, 2), 'base-selector'); | 189 | $block-base-selector: map-get(nth($parent-context, 2), 'base-selector'); |
185 | 190 | ||
186 | @each $name in join($name, $names) { | 191 | @each $name in join($name, $names) { |
187 | $sel: selector-nest(&, selector-append($block-base-selector, $iro-bem-element-separator + $name)); | 192 | $sel: selector-nest(&, selector-append($block-base-selector, vars.$element-separator + $name)); |
188 | $selector: join($selector, $sel, comma); | 193 | $selector: join($selector, $sel, comma); |
189 | $parts-data: append($parts-data, ( | 194 | $parts-data: append($parts-data, ( |
190 | 'name': $name, | 195 | 'name': $name, |
@@ -217,11 +222,11 @@ | |||
217 | /// @throw If the element is not preceded by an element. | 222 | /// @throw If the element is not preceded by an element. |
218 | /// | 223 | /// |
219 | /// @example scss - A sibling element to a single element | 224 | /// @example scss - A sibling element to a single element |
220 | /// @include iro-bem-component('block') { | 225 | /// @include component('block') { |
221 | /// @include iro-bem-element('elem') { | 226 | /// @include elem('elem') { |
222 | /// /* some element definitions */ | 227 | /// /* some element definitions */ |
223 | /// | 228 | /// |
224 | /// @include iro-bem-related-element('~', 'sibling') { | 229 | /// @include related-elem('~', 'sibling') { |
225 | /// /* some sibling element definitions */ | 230 | /// /* some sibling element definitions */ |
226 | /// } | 231 | /// } |
227 | /// } | 232 | /// } |
@@ -238,11 +243,11 @@ | |||
238 | /// } | 243 | /// } |
239 | /// | 244 | /// |
240 | /// @example scss - A successor element to a single element | 245 | /// @example scss - A successor element to a single element |
241 | /// @include iro-bem-component('block') { | 246 | /// @include component('block') { |
242 | /// @include iro-bem-element('elem') { | 247 | /// @include elem('elem') { |
243 | /// /* some element definitions */ | 248 | /// /* some element definitions */ |
244 | /// | 249 | /// |
245 | /// @include iro-bem-related-element('+', 'successor') { | 250 | /// @include related-elem('+', 'successor') { |
246 | /// /* some successor element definitions */ | 251 | /// /* some successor element definitions */ |
247 | /// } | 252 | /// } |
248 | /// } | 253 | /// } |
@@ -259,11 +264,11 @@ | |||
259 | /// } | 264 | /// } |
260 | /// | 265 | /// |
261 | /// @example scss - A successor element to multiple elements | 266 | /// @example scss - A successor element to multiple elements |
262 | /// @include iro-bem-component('block') { | 267 | /// @include component('block') { |
263 | /// @include iro-bem-element('elem1', 'elem2') { | 268 | /// @include elem('elem1', 'elem2') { |
264 | /// /* some element definitions */ | 269 | /// /* some element definitions */ |
265 | /// | 270 | /// |
266 | /// @include iro-bem-related-element('+', 'successor') { | 271 | /// @include related-elem('+', 'successor') { |
267 | /// /* some successor element definitions */ | 272 | /// /* some successor element definitions */ |
268 | /// } | 273 | /// } |
269 | /// } | 274 | /// } |
@@ -279,23 +284,23 @@ | |||
279 | /// /* some successor element definitions */ | 284 | /// /* some successor element definitions */ |
280 | /// } | 285 | /// } |
281 | /// | 286 | /// |
282 | @mixin iro-bem-related-element($sign, $name, $names...) { | 287 | @mixin related-elem($sign, $name, $names...) { |
283 | $result: iro-bem-related-element($sign, $name, $names...); | 288 | $result: related-elem($sign, $name, $names...); |
284 | $selector: nth($result, 1); | 289 | $selector: nth($result, 1); |
285 | $context: nth($result, 2); | 290 | $context: nth($result, 2); |
286 | 291 | ||
287 | @include iro-bem-validate( | 292 | @include validators.validate( |
288 | 'related-element', | 293 | 'related-element', |
289 | (sign: $sign, name: $name, names: $names), | 294 | (sign: $sign, name: $name, names: $names), |
290 | $selector, | 295 | $selector, |
291 | $context | 296 | $context |
292 | ); | 297 | ); |
293 | 298 | ||
294 | @include iro-context-push($iro-bem-context-id, $context...); | 299 | @include contexts.push(vars.$context-id, $context...); |
295 | @at-root #{$selector} { | 300 | @at-root #{$selector} { |
296 | @content; | 301 | @content; |
297 | } | 302 | } |
298 | @include iro-context-pop($iro-bem-context-id); | 303 | @include contexts.pop(vars.$context-id); |
299 | } | 304 | } |
300 | 305 | ||
301 | /// | 306 | /// |
@@ -304,9 +309,9 @@ | |||
304 | /// | 309 | /// |
305 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 310 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
306 | /// | 311 | /// |
307 | /// @see {mixin} iro-bem-related-element | 312 | /// @see {mixin} related-element |
308 | /// | 313 | /// |
309 | @function iro-bem-related-element($sign, $name, $names...) { | 314 | @function related-elem($sign, $name, $names...) { |
310 | // | 315 | // |
311 | // Generating this selector is simple: Take the latest block context, use it | 316 | // Generating this selector is simple: Take the latest block context, use it |
312 | // to generate the element part, and insert it at the end of the current selector. | 317 | // to generate the element part, and insert it at the end of the current selector. |
@@ -315,21 +320,21 @@ | |||
315 | // - {e} ({m,s}) ([manual selector]) ~ {e} | 320 | // - {e} ({m,s}) ([manual selector]) ~ {e} |
316 | // | 321 | // |
317 | 322 | ||
318 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 323 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
319 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); | 324 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element'); |
320 | 325 | ||
321 | @if $sign != '+' and $sign != '~' { | 326 | @if $sign != '+' and $sign != '~' { |
322 | @error 'Invalid relationship sign #{inspect($sign)}.'; | 327 | @error 'Invalid relationship sign #{inspect($sign)}.'; |
323 | } | 328 | } |
324 | 329 | ||
325 | $block-context: iro-context-get($iro-bem-context-id, 'block'); | 330 | $block-context: contexts.get(vars.$context-id, 'block'); |
326 | $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); | 331 | $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); |
327 | 332 | ||
328 | $selector: (); | 333 | $selector: (); |
329 | $parts-data: (); | 334 | $parts-data: (); |
330 | 335 | ||
331 | @each $name in join($name, $names) { | 336 | @each $name in join($name, $names) { |
332 | $sel: selector-nest(&, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $name)); | 337 | $sel: selector-nest(&, $sign, selector-append($block-base-selector, vars.$element-separator + $name)); |
333 | $selector: join($selector, $sel, comma); | 338 | $selector: join($selector, $sel, comma); |
334 | $parts-data: append($parts-data, ( | 339 | $parts-data: append($parts-data, ( |
335 | 'name': $name, | 340 | 'name': $name, |
@@ -348,15 +353,15 @@ | |||
348 | /// | 353 | /// |
349 | /// Generate a BEM element that is a sibling of the current element. | 354 | /// Generate a BEM element that is a sibling of the current element. |
350 | /// | 355 | /// |
351 | /// It's a shorthand for iro-bem-related-element('~', $name). | 356 | /// It's a shorthand for related-elem('~', $name). |
352 | /// | 357 | /// |
353 | /// @param {string} $name - First element name | 358 | /// @param {string} $name - First element name |
354 | /// @param {list} $names - List of more element names | 359 | /// @param {list} $names - List of more element names |
355 | /// | 360 | /// |
356 | /// @content | 361 | /// @content |
357 | /// | 362 | /// |
358 | @mixin iro-bem-sibling-element($name, $names...) { | 363 | @mixin sibling-elem($name, $names...) { |
359 | @include iro-bem-related-element('~', $name, $names...) { | 364 | @include related-elem('~', $name, $names...) { |
360 | @content; | 365 | @content; |
361 | } | 366 | } |
362 | } | 367 | } |
@@ -367,24 +372,24 @@ | |||
367 | /// | 372 | /// |
368 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 373 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
369 | /// | 374 | /// |
370 | /// @see {mixin} iro-bem-sibling-element | 375 | /// @see {mixin} sibling-element |
371 | /// | 376 | /// |
372 | @function iro-bem-sibling-element($name, $names...) { | 377 | @function sibling-elem($name, $names...) { |
373 | @return iro-bem-related-element('~', $name, $names...); | 378 | @return related-elem('~', $name, $names...); |
374 | } | 379 | } |
375 | 380 | ||
376 | /// | 381 | /// |
377 | /// Generate a BEM element that is the successor of the current element. | 382 | /// Generate a BEM element that is the successor of the current element. |
378 | /// | 383 | /// |
379 | /// It's a shorthand for iro-bem-related-element('+', $name). | 384 | /// It's a shorthand for related-elem('+', $name). |
380 | /// | 385 | /// |
381 | /// @param {string} $name - First element name | 386 | /// @param {string} $name - First element name |
382 | /// @param {string} $names - More element names | 387 | /// @param {string} $names - More element names |
383 | /// | 388 | /// |
384 | /// @content | 389 | /// @content |
385 | /// | 390 | /// |
386 | @mixin iro-bem-next-element($name, $names...) { | 391 | @mixin next-elem($name, $names...) { |
387 | @include iro-bem-related-element('+', $name, $names...) { | 392 | @include related-elem('+', $name, $names...) { |
388 | @content; | 393 | @content; |
389 | } | 394 | } |
390 | } | 395 | } |
@@ -395,28 +400,28 @@ | |||
395 | /// | 400 | /// |
396 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 401 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
397 | /// | 402 | /// |
398 | /// @see {mixin} iro-bem-next-element | 403 | /// @see {mixin} next-element |
399 | /// | 404 | /// |
400 | @function iro-bem-next-element($name, $names...) { | 405 | @function next-elem($name, $names...) { |
401 | @return iro-bem-related-element('+', $name, $names...); | 406 | @return related-elem('+', $name, $names...); |
402 | } | 407 | } |
403 | 408 | ||
404 | /// | 409 | /// |
405 | /// Generate the current BEM element as a successor of itself. | 410 | /// Generate the current BEM element as a successor of itself. |
406 | /// | 411 | /// |
407 | /// If this is applied to a single element, it behaves exactly the same as | 412 | /// If this is applied to a single element, it behaves exactly the same as |
408 | /// iro-bem-related-element('+', name); | 413 | /// related-elem('+', name); |
409 | /// However, if it is applied to multiple elements, each twin element only will influence | 414 | /// However, if it is applied to multiple elements, each twin element only will influence |
410 | /// their other twin, which is not replicable with iro-bem-related-element. | 415 | /// their other twin, which is not replicable with related-element. |
411 | /// | 416 | /// |
412 | /// @content | 417 | /// @content |
413 | /// | 418 | /// |
414 | /// @example scss - Two twin elements | 419 | /// @example scss - Two twin elements |
415 | /// @include iro-bem-component('block') { | 420 | /// @include component('block') { |
416 | /// @include iro-bem-element('elem') { | 421 | /// @include elem('elem') { |
417 | /// /* some element definitions */ | 422 | /// /* some element definitions */ |
418 | /// | 423 | /// |
419 | /// @include iro-bem-next-twin-element { | 424 | /// @include next-twin-element { |
420 | /// /* some twin element definitions */ | 425 | /// /* some twin element definitions */ |
421 | /// } | 426 | /// } |
422 | /// } | 427 | /// } |
@@ -433,11 +438,11 @@ | |||
433 | /// } | 438 | /// } |
434 | /// | 439 | /// |
435 | /// @example scss - Multiple twin elements | 440 | /// @example scss - Multiple twin elements |
436 | /// @include iro-bem-component('block') { | 441 | /// @include component('block') { |
437 | /// @include iro-bem-element('elem1', 'elem2') { | 442 | /// @include elem('elem1', 'elem2') { |
438 | /// /* some element definitions */ | 443 | /// /* some element definitions */ |
439 | /// | 444 | /// |
440 | /// @include iro-bem-next-twin-element { | 445 | /// @include next-twin-element { |
441 | /// /* some twin element definitions */ | 446 | /// /* some twin element definitions */ |
442 | /// } | 447 | /// } |
443 | /// } | 448 | /// } |
@@ -453,23 +458,23 @@ | |||
453 | /// /* some twin element definitions */ | 458 | /// /* some twin element definitions */ |
454 | /// } | 459 | /// } |
455 | /// | 460 | /// |
456 | @mixin iro-bem-related-twin-element($sign) { | 461 | @mixin related-twin-elem($sign) { |
457 | $result: iro-bem-related-twin-element($sign); | 462 | $result: related-twin-elem($sign); |
458 | $selector: nth($result, 1); | 463 | $selector: nth($result, 1); |
459 | $context: nth($result, 2); | 464 | $context: nth($result, 2); |
460 | 465 | ||
461 | @include iro-bem-validate( | 466 | @include validators.validate( |
462 | 'next-twin-element', | 467 | 'next-twin-element', |
463 | (), | 468 | (), |
464 | $selector, | 469 | $selector, |
465 | $context | 470 | $context |
466 | ); | 471 | ); |
467 | 472 | ||
468 | @include iro-context-push($iro-bem-context-id, $context...); | 473 | @include contexts.push(vars.$context-id, $context...); |
469 | @at-root #{$selector} { | 474 | @at-root #{$selector} { |
470 | @content; | 475 | @content; |
471 | } | 476 | } |
472 | @include iro-context-pop($iro-bem-context-id); | 477 | @include contexts.pop(vars.$context-id); |
473 | } | 478 | } |
474 | 479 | ||
475 | /// | 480 | /// |
@@ -478,16 +483,16 @@ | |||
478 | /// | 483 | /// |
479 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 484 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
480 | /// | 485 | /// |
481 | /// @see {mixin} iro-bem-next-twin-element | 486 | /// @see {mixin} next-twin-element |
482 | /// | 487 | /// |
483 | @function iro-bem-related-twin-element($sign) { | 488 | @function related-twin-elem($sign) { |
484 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 489 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
485 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); | 490 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element'); |
486 | 491 | ||
487 | $element-context: iro-context-get($iro-bem-context-id, 'element'); | 492 | $element-context: contexts.get(vars.$context-id, 'element'); |
488 | $element-selector: map-get(nth($element-context, 2), 'selector'); | 493 | $element-selector: map-get(nth($element-context, 2), 'selector'); |
489 | 494 | ||
490 | $block-context: iro-context-get($iro-bem-context-id, 'block'); | 495 | $block-context: contexts.get(vars.$context-id, 'block'); |
491 | $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); | 496 | $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); |
492 | 497 | ||
493 | $selector: (); | 498 | $selector: (); |
@@ -505,7 +510,7 @@ | |||
505 | $part-name: map-get($part-data, 'name'); | 510 | $part-name: map-get($part-data, 'name'); |
506 | 511 | ||
507 | $sel: (); | 512 | $sel: (); |
508 | @if iro-selector-suffix-match(&, $element-selector) { | 513 | @if functions.selector-suffix-match(&, $element-selector) { |
509 | // | 514 | // |
510 | // This mixin is included in the selector the last element mixin created. | 515 | // This mixin is included in the selector the last element mixin created. |
511 | // Possible outcomes: | 516 | // Possible outcomes: |
@@ -516,7 +521,7 @@ | |||
516 | @each $s in & { | 521 | @each $s in & { |
517 | @each $ps in $part-selector { | 522 | @each $ps in $part-selector { |
518 | @if nth($s, -1) == nth($ps, -1) { | 523 | @if nth($s, -1) == nth($ps, -1) { |
519 | $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); | 524 | $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, vars.$element-separator + $part-name)); |
520 | $sel: join($sel, $sel-ent, comma); | 525 | $sel: join($sel, $sel-ent, comma); |
521 | } | 526 | } |
522 | } | 527 | } |
@@ -537,7 +542,7 @@ | |||
537 | $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null; | 542 | $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null; |
538 | 543 | ||
539 | @if not $match { | 544 | @if not $match { |
540 | @each $separator in $iro-bem-element-separator $iro-bem-modifier-separator $iro-bem-suffix-separator { | 545 | @each $separator in vars.$element-separator vars.$modifier-separator vars.$suffix-separator { |
541 | @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator { | 546 | @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator { |
542 | $match: true; | 547 | $match: true; |
543 | } | 548 | } |
@@ -545,7 +550,7 @@ | |||
545 | } | 550 | } |
546 | 551 | ||
547 | @if $match { | 552 | @if $match { |
548 | $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); | 553 | $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, vars.$element-separator + $part-name)); |
549 | $sel: join($sel, $sel-ent, comma); | 554 | $sel: join($sel, $sel-ent, comma); |
550 | } | 555 | } |
551 | } | 556 | } |
@@ -574,12 +579,12 @@ | |||
574 | /// | 579 | /// |
575 | /// Generate the current BEM element as a sibling of itself. | 580 | /// Generate the current BEM element as a sibling of itself. |
576 | /// | 581 | /// |
577 | /// It's a shorthand for iro-bem-related-twin-element('~'). | 582 | /// It's a shorthand for related-twin-elem('~'). |
578 | /// | 583 | /// |
579 | /// @content | 584 | /// @content |
580 | /// | 585 | /// |
581 | @mixin iro-bem-sibling-twin-element { | 586 | @mixin sibling-twin-element { |
582 | @include iro-bem-related-twin-element('~') { | 587 | @include related-twin-elem('~') { |
583 | @content; | 588 | @content; |
584 | } | 589 | } |
585 | } | 590 | } |
@@ -590,21 +595,21 @@ | |||
590 | /// | 595 | /// |
591 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 596 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
592 | /// | 597 | /// |
593 | /// @see {mixin} iro-bem-sibling-twin-element | 598 | /// @see {mixin} sibling-twin-element |
594 | /// | 599 | /// |
595 | @function iro-bem-sibling-twin-element() { | 600 | @function sibling-twin-elem() { |
596 | @return iro-bem-related-twin-element('~'); | 601 | @return related-twin-elem('~'); |
597 | } | 602 | } |
598 | 603 | ||
599 | /// | 604 | /// |
600 | /// Generate the current BEM element as a next sibling of itself. | 605 | /// Generate the current BEM element as a next sibling of itself. |
601 | /// | 606 | /// |
602 | /// It's a shorthand for iro-bem-related-twin-element('+', $name). | 607 | /// It's a shorthand for related-twin-elem('+', $name). |
603 | /// | 608 | /// |
604 | /// @content | 609 | /// @content |
605 | /// | 610 | /// |
606 | @mixin iro-bem-next-twin-element { | 611 | @mixin next-twin-element { |
607 | @include iro-bem-related-twin-element('+') { | 612 | @include related-twin-elem('+') { |
608 | @content; | 613 | @content; |
609 | } | 614 | } |
610 | } | 615 | } |
@@ -615,8 +620,8 @@ | |||
615 | /// | 620 | /// |
616 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 621 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
617 | /// | 622 | /// |
618 | /// @see {mixin} iro-bem-next-twin-element | 623 | /// @see {mixin} next-twin-element |
619 | /// | 624 | /// |
620 | @function iro-bem-next-twin-element() { | 625 | @function next-twin-elem() { |
621 | @return iro-bem-related-twin-element('+'); | 626 | @return related-twin-elem('+'); |
622 | } | 627 | } |
diff --git a/src/bem/_functions.scss b/src/bem/_functions.scss index 4bb95c4..b7bd5ec 100644 --- a/src/bem/_functions.scss +++ b/src/bem/_functions.scss | |||
@@ -4,11 +4,13 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @use './vars'; | ||
8 | |||
7 | /// | 9 | /// |
8 | /// @access private | 10 | /// @access private |
9 | /// | 11 | /// |
10 | @function iro-bem-theme-selector($name, $names...) { | 12 | @function theme-selector($name, $names...) { |
11 | $namespace: map-get($iro-bem-namespaces, 'theme'); | 13 | $namespace: map-get(vars.$namespaces, 'theme'); |
12 | $selector: null; | 14 | $selector: null; |
13 | 15 | ||
14 | @each $name in join($name, $names) { | 16 | @each $name in join($name, $names) { |
diff --git a/src/bem/_modifier.scss b/src/bem/_modifier.scss index ac4cb2e..be65e47 100644 --- a/src/bem/_modifier.scss +++ b/src/bem/_modifier.scss | |||
@@ -4,6 +4,11 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @use './validators'; | ||
8 | @use './vars'; | ||
9 | @use '../functions'; | ||
10 | @use '../contexts'; | ||
11 | |||
7 | /// | 12 | /// |
8 | /// Generate a new BEM modifier. | 13 | /// Generate a new BEM modifier. |
9 | /// | 14 | /// |
@@ -25,13 +30,13 @@ | |||
25 | /// @throw If the element is not preceded by a block, element, modifier or suffix. | 30 | /// @throw If the element is not preceded by a block, element, modifier or suffix. |
26 | /// | 31 | /// |
27 | /// @example scss - Modifier that modifies a block or element | 32 | /// @example scss - Modifier that modifies a block or element |
28 | /// @include iro-bem-component('block') { | 33 | /// @include component('block') { |
29 | /// @include iro-bem-modifier('mod') { | 34 | /// @include modifier('mod') { |
30 | /// background-color: #eee; | 35 | /// background-color: #eee; |
31 | /// } | 36 | /// } |
32 | /// | 37 | /// |
33 | /// @include iro-bem-element('elem') { | 38 | /// @include elem('elem') { |
34 | /// @include iro-bem-modifier('mod') { | 39 | /// @include modifier('mod') { |
35 | /// background-color: #222; | 40 | /// background-color: #222; |
36 | /// } | 41 | /// } |
37 | /// } | 42 | /// } |
@@ -48,15 +53,15 @@ | |||
48 | /// } | 53 | /// } |
49 | /// | 54 | /// |
50 | /// @example scss - Modifier nested in another modifier, not extending | 55 | /// @example scss - Modifier nested in another modifier, not extending |
51 | /// @include iro-bem-component('block') { | 56 | /// @include component('block') { |
52 | /// @include iro-bem-modifier('mod') { | 57 | /// @include modifier('mod') { |
53 | /// background-color: #eee; | 58 | /// background-color: #eee; |
54 | /// } | 59 | /// } |
55 | /// | 60 | /// |
56 | /// @include iro-bem-modifier('dark') { | 61 | /// @include modifier('dark') { |
57 | /// /* some definitions */ | 62 | /// /* some definitions */ |
58 | /// | 63 | /// |
59 | /// @include iro-bem-modifier('mod') { | 64 | /// @include modifier('mod') { |
60 | /// background-color: #222; | 65 | /// background-color: #222; |
61 | /// } | 66 | /// } |
62 | /// } | 67 | /// } |
@@ -77,15 +82,15 @@ | |||
77 | /// } | 82 | /// } |
78 | /// | 83 | /// |
79 | /// @example scss - Modifier nested in another modifier, extending | 84 | /// @example scss - Modifier nested in another modifier, extending |
80 | /// @include iro-bem-component('block') { | 85 | /// @include component('block') { |
81 | /// @include iro-bem-modifier('mod') { | 86 | /// @include modifier('mod') { |
82 | /// background-color: #eee; | 87 | /// background-color: #eee; |
83 | /// } | 88 | /// } |
84 | /// | 89 | /// |
85 | /// @include iro-bem-modifier('dark') { | 90 | /// @include modifier('dark') { |
86 | /// /* some definitions */ | 91 | /// /* some definitions */ |
87 | /// | 92 | /// |
88 | /// @include iro-bem-modifier('mod' true) { | 93 | /// @include modifier('mod' true) { |
89 | /// background-color: #222; | 94 | /// background-color: #222; |
90 | /// } | 95 | /// } |
91 | /// } | 96 | /// } |
@@ -105,23 +110,23 @@ | |||
105 | /// background-color: #222; | 110 | /// background-color: #222; |
106 | /// } | 111 | /// } |
107 | /// | 112 | /// |
108 | @mixin iro-bem-modifier($name, $names...) { | 113 | @mixin modifier($name, $names...) { |
109 | $result: iro-bem-modifier($name, $names...); | 114 | $result: modifier($name, $names...); |
110 | $selector: nth($result, 1); | 115 | $selector: nth($result, 1); |
111 | $context: nth($result, 2); | 116 | $context: nth($result, 2); |
112 | 117 | ||
113 | @include iro-bem-validate( | 118 | @include validators.validate( |
114 | 'modifier', | 119 | 'modifier', |
115 | (name: $name, names: $names), | 120 | (name: $name, names: $names), |
116 | $selector, | 121 | $selector, |
117 | $context | 122 | $context |
118 | ); | 123 | ); |
119 | 124 | ||
120 | @include iro-context-push($iro-bem-context-id, $context...); | 125 | @include contexts.push(vars.$context-id, $context...); |
121 | @at-root #{$selector} { | 126 | @at-root #{$selector} { |
122 | @content; | 127 | @content; |
123 | } | 128 | } |
124 | @include iro-context-pop($iro-bem-context-id); | 129 | @include contexts.pop(vars.$context-id); |
125 | } | 130 | } |
126 | 131 | ||
127 | /// | 132 | /// |
@@ -129,18 +134,18 @@ | |||
129 | /// | 134 | /// |
130 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 135 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
131 | /// | 136 | /// |
132 | /// @see {mixin} iro-bem-modifier | 137 | /// @see {mixin} modifier |
133 | /// | 138 | /// |
134 | @function iro-bem-modifier($name, $names...) { | 139 | @function modifier($name, $names...) { |
135 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 140 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
136 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); | 141 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); |
137 | 142 | ||
138 | $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier' 'suffix' 'state'); | 143 | $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier' 'suffix' 'state'); |
139 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); | 144 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); |
140 | $selector: (); | 145 | $selector: (); |
141 | $parts-data: (); | 146 | $parts-data: (); |
142 | 147 | ||
143 | @if not iro-selector-suffix-match(&, $parent-selector) { | 148 | @if not functions.selector-suffix-match(&, $parent-selector) { |
144 | // | 149 | // |
145 | // The current selector doesn't match the parent selector. | 150 | // The current selector doesn't match the parent selector. |
146 | // The user manually added a selector between parent context and this modifier call. | 151 | // The user manually added a selector between parent context and this modifier call. |
@@ -155,7 +160,7 @@ | |||
155 | @error 'A modifier must be an immediate child of the parent context'; | 160 | @error 'A modifier must be an immediate child of the parent context'; |
156 | } | 161 | } |
157 | 162 | ||
158 | @each $name in iro-list-prepend($names, $name) { | 163 | @each $name in functions.list-prepend($names, $name) { |
159 | $extend: false; | 164 | $extend: false; |
160 | @if type-of($name) == list { | 165 | @if type-of($name) == list { |
161 | $extend: nth($name, 2); | 166 | $extend: nth($name, 2); |
@@ -170,7 +175,7 @@ | |||
170 | // - {b,e,m,s}--modifier | 175 | // - {b,e,m,s}--modifier |
171 | // | 176 | // |
172 | 177 | ||
173 | $sel: selector-append(&, $iro-bem-modifier-separator + $name); | 178 | $sel: selector-append(&, vars.$modifier-separator + $name); |
174 | $selector: join($selector, $sel, comma); | 179 | $selector: join($selector, $sel, comma); |
175 | $parts-data: append($parts-data, ( | 180 | $parts-data: append($parts-data, ( |
176 | 'name': $name, | 181 | 'name': $name, |
@@ -181,7 +186,7 @@ | |||
181 | // Parent context is modifier, suffix or state and $extend is false. | 186 | // Parent context is modifier, suffix or state and $extend is false. |
182 | // | 187 | // |
183 | 188 | ||
184 | $be-context: iro-context-get($iro-bem-context-id, 'block' 'element'); | 189 | $be-context: contexts.get(vars.$context-id, 'block' 'element'); |
185 | 190 | ||
186 | @if nth($be-context, 1) == 'element' { | 191 | @if nth($be-context, 1) == 'element' { |
187 | // | 192 | // |
@@ -201,8 +206,8 @@ | |||
201 | $sel: (); | 206 | $sel: (); |
202 | @each $s in & { | 207 | @each $s in & { |
203 | @each $ps in $elem-part-selector { | 208 | @each $ps in $elem-part-selector { |
204 | @if str-index(inspect($s), inspect($ps) + $iro-bem-modifier-separator) or str-index(inspect($s), inspect($ps) + $iro-bem-suffix-separator) { | 209 | @if str-index(inspect($s), inspect($ps) + vars.$modifier-separator) or str-index(inspect($s), inspect($ps) + vars.$suffix-separator) { |
205 | $sel: join($sel, selector-unify($s, selector-append($ps, $iro-bem-modifier-separator + $name)), comma); | 210 | $sel: join($sel, selector-unify($s, selector-append($ps, vars.$modifier-separator + $name)), comma); |
206 | } | 211 | } |
207 | } | 212 | } |
208 | } | 213 | } |
@@ -227,7 +232,7 @@ | |||
227 | 232 | ||
228 | $block-base-selector: map-get(nth($be-context, 2), 'base-selector'); | 233 | $block-base-selector: map-get(nth($be-context, 2), 'base-selector'); |
229 | 234 | ||
230 | $sel: selector-append(&, $block-base-selector, $iro-bem-modifier-separator + $name); | 235 | $sel: selector-append(&, $block-base-selector, vars.$modifier-separator + $name); |
231 | $selector: join($selector, $sel, comma); | 236 | $selector: join($selector, $sel, comma); |
232 | $parts-data: append($parts-data, ( | 237 | $parts-data: append($parts-data, ( |
233 | 'name': $name, | 238 | 'name': $name, |
diff --git a/src/bem/_multi.scss b/src/bem/_multi.scss index 9e47ce4..1de5cdc 100644 --- a/src/bem/_multi.scss +++ b/src/bem/_multi.scss | |||
@@ -4,6 +4,16 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @use '../functions'; | ||
8 | @use '../contexts'; | ||
9 | @use './block'; | ||
10 | @use './element'; | ||
11 | @use './modifier'; | ||
12 | @use './state'; | ||
13 | @use './suffix'; | ||
14 | @use './theme'; | ||
15 | @use './vars'; | ||
16 | |||
7 | /// | 17 | /// |
8 | /// Generate multiple entities (BEM or not) at once. | 18 | /// Generate multiple entities (BEM or not) at once. |
9 | /// | 19 | /// |
@@ -15,10 +25,10 @@ | |||
15 | /// @content | 25 | /// @content |
16 | /// | 26 | /// |
17 | /// @example scss - Creating multiple elements, a modifier and an anchor | 27 | /// @example scss - Creating multiple elements, a modifier and an anchor |
18 | /// @include iro-bem-object('buttonstrip') { | 28 | /// @include object('buttonstrip') { |
19 | /// display: none; | 29 | /// display: none; |
20 | /// | 30 | /// |
21 | /// @include iro-bem-multi('modifier' 'mod', 'element' 'button' 'separator', '> a') { | 31 | /// @include multi('modifier' 'mod', 'elem' 'button' 'separator', '> a') { |
22 | /// display: block; | 32 | /// display: block; |
23 | /// } | 33 | /// } |
24 | /// } | 34 | /// } |
@@ -43,10 +53,10 @@ | |||
43 | /// } | 53 | /// } |
44 | /// | 54 | /// |
45 | /// @example scss - Creating multiple elements, a modifier and an anchor - optional colons included | 55 | /// @example scss - Creating multiple elements, a modifier and an anchor - optional colons included |
46 | /// @include iro-bem-object('buttonstrip') { | 56 | /// @include object('buttonstrip') { |
47 | /// display: none; | 57 | /// display: none; |
48 | /// | 58 | /// |
49 | /// @include iro-bem-multi('modifier:' 'mod', 'element:' 'button' 'separator', '> a') { | 59 | /// @include multi('modifier:' 'mod', 'elem:' 'button' 'separator', '> a') { |
50 | /// display: block; | 60 | /// display: block; |
51 | /// } | 61 | /// } |
52 | /// } | 62 | /// } |
@@ -70,14 +80,16 @@ | |||
70 | /// display: block; | 80 | /// display: block; |
71 | /// } | 81 | /// } |
72 | /// | 82 | /// |
73 | @mixin iro-bem-multi($first, $others...) { | 83 | @mixin multi($first, $others...) { |
74 | @include iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 84 | @include contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
75 | 85 | ||
76 | @each $entity in iro-list-prepend($others, $first) { | 86 | @each $entity in functions.list-prepend($others, $first) { |
77 | $is-manual-selector: false; | 87 | $is-manual-selector: false; |
78 | 88 | ||
79 | @if type-of($entity) == string and not function-exists('iro-bem-' + $entity) { | 89 | @if type-of($entity) == string { |
80 | $is-manual-selector: true; | 90 | @if find-bem-function($entity) == null { |
91 | $is-manual-selector: true; | ||
92 | } | ||
81 | } | 93 | } |
82 | 94 | ||
83 | @if $is-manual-selector { | 95 | @if $is-manual-selector { |
@@ -91,23 +103,17 @@ | |||
91 | 103 | ||
92 | @if type-of($entity) == list { | 104 | @if type-of($entity) == list { |
93 | $entity-func-id: nth($entity, 1); | 105 | $entity-func-id: nth($entity, 1); |
94 | $entity: iro-list-slice($entity, 2); | 106 | $entity: functions.list-slice($entity, 2); |
95 | } @else { | 107 | } @else { |
96 | $entity-func-id: $entity; | 108 | $entity-func-id: $entity; |
97 | $entity: (); | 109 | $entity: (); |
98 | } | 110 | } |
99 | 111 | ||
100 | @if str-slice($entity-func-id, str-length($entity-func-id)) == ':' { | 112 | @if str-slice($entity-func-id, str-length($entity-func-id)) == ':' { |
101 | $entity-func-id: str-slice($entity-func-id, 1, str-length($entity-func-id) - 1); | 113 | $entity-func-id: unquote(str-slice($entity-func-id, 1, str-length($entity-func-id) - 1)); |
102 | } | 114 | } |
103 | 115 | ||
104 | $sel-func: null; | 116 | $sel-func: find-bem-function($entity-func-id); |
105 | |||
106 | @if function-exists('iro-bem-' + $entity-func-id) { | ||
107 | $sel-func: get-function('iro-bem-' + $entity-func-id); | ||
108 | } @else if function-exists($entity-func-id) { | ||
109 | $sel-func: get-function($entity-func-id); | ||
110 | } | ||
111 | 117 | ||
112 | @if $sel-func == null { | 118 | @if $sel-func == null { |
113 | @error 'Function "#{inspect($entity-func-id)}" was not found.'; | 119 | @error 'Function "#{inspect($entity-func-id)}" was not found.'; |
@@ -118,14 +124,24 @@ | |||
118 | $entity-result-context: nth($entity-result, 2); | 124 | $entity-result-context: nth($entity-result, 2); |
119 | 125 | ||
120 | @if $entity-result-context != null { | 126 | @if $entity-result-context != null { |
121 | @include iro-context-push($iro-bem-context-id, $entity-result-context...); | 127 | @include contexts.push(vars.$context-id, $entity-result-context...); |
122 | } | 128 | } |
123 | @at-root #{$entity-result-selector} { | 129 | @at-root #{$entity-result-selector} { |
124 | @content; | 130 | @content; |
125 | } | 131 | } |
126 | @if $entity-result-context != null { | 132 | @if $entity-result-context != null { |
127 | @include iro-context-pop($iro-bem-context-id); | 133 | @include contexts.pop(vars.$context-id); |
128 | } | 134 | } |
129 | } | 135 | } |
130 | } | 136 | } |
131 | } | 137 | } |
138 | |||
139 | @function find-bem-function($name) { | ||
140 | @each $module in (block element modifier state suffix theme) { | ||
141 | @if function-exists($name, $module) { | ||
142 | @return get-function($name, $module: $module); | ||
143 | } | ||
144 | } | ||
145 | |||
146 | @return null; | ||
147 | } | ||
diff --git a/src/bem/_state.scss b/src/bem/_state.scss index 4a85bbb..2d430bf 100644 --- a/src/bem/_state.scss +++ b/src/bem/_state.scss | |||
@@ -4,6 +4,10 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @use './validators'; | ||
8 | @use './vars'; | ||
9 | @use '../contexts'; | ||
10 | |||
7 | /// | 11 | /// |
8 | /// Create a new state rule. | 12 | /// Create a new state rule. |
9 | /// | 13 | /// |
@@ -13,10 +17,10 @@ | |||
13 | /// @content | 17 | /// @content |
14 | /// | 18 | /// |
15 | /// @example scss - Using single is-state | 19 | /// @example scss - Using single is-state |
16 | /// @include iro-bem-object('menu') { | 20 | /// @include object('menu') { |
17 | /// display: none; | 21 | /// display: none; |
18 | /// | 22 | /// |
19 | /// @include iro-bem-state('is', open') { | 23 | /// @include state('is', open') { |
20 | /// display: block; | 24 | /// display: block; |
21 | /// } | 25 | /// } |
22 | /// } | 26 | /// } |
@@ -32,10 +36,10 @@ | |||
32 | /// } | 36 | /// } |
33 | /// | 37 | /// |
34 | /// @example scss - Using multiple is-states | 38 | /// @example scss - Using multiple is-states |
35 | /// @include iro-bem-object('menu') { | 39 | /// @include object('menu') { |
36 | /// display: none; | 40 | /// display: none; |
37 | /// | 41 | /// |
38 | /// @include iro-bem-state('is', open', 'visible') { | 42 | /// @include state('is', open', 'visible') { |
39 | /// display: block; | 43 | /// display: block; |
40 | /// } | 44 | /// } |
41 | /// } | 45 | /// } |
@@ -51,23 +55,23 @@ | |||
51 | /// display: block; | 55 | /// display: block; |
52 | /// } | 56 | /// } |
53 | /// | 57 | /// |
54 | @mixin iro-bem-state($prefix, $state, $states...) { | 58 | @mixin state($prefix, $state, $states...) { |
55 | $result: iro-bem-state($prefix, $state, $states...); | 59 | $result: state($prefix, $state, $states...); |
56 | $selector: nth($result, 1); | 60 | $selector: nth($result, 1); |
57 | $context: nth($result, 2); | 61 | $context: nth($result, 2); |
58 | 62 | ||
59 | @include iro-bem-validate( | 63 | @include validators.validate( |
60 | 'state', | 64 | 'state', |
61 | (prefix: $prefix, state: $state, states: $states), | 65 | (prefix: $prefix, state: $state, states: $states), |
62 | $selector, | 66 | $selector, |
63 | $context | 67 | $context |
64 | ); | 68 | ); |
65 | 69 | ||
66 | @include iro-context-push($iro-bem-context-id, $context...); | 70 | @include contexts.push(vars.$context-id, $context...); |
67 | @at-root #{$selector} { | 71 | @at-root #{$selector} { |
68 | @content; | 72 | @content; |
69 | } | 73 | } |
70 | @include iro-context-pop($iro-bem-context-id); | 74 | @include contexts.pop(vars.$context-id); |
71 | } | 75 | } |
72 | 76 | ||
73 | /// | 77 | /// |
@@ -75,9 +79,9 @@ | |||
75 | /// | 79 | /// |
76 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 80 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
77 | /// | 81 | /// |
78 | /// @see {mixin} iro-bem-has | 82 | /// @see {mixin} has |
79 | /// | 83 | /// |
80 | @function iro-bem-state($prefix, $state, $states...) { | 84 | @function state($prefix, $state, $states...) { |
81 | $selector: (); | 85 | $selector: (); |
82 | $parts-data: (); | 86 | $parts-data: (); |
83 | 87 | ||
@@ -104,10 +108,10 @@ | |||
104 | /// | 108 | /// |
105 | /// Create a new has-state modifier. | 109 | /// Create a new has-state modifier. |
106 | /// | 110 | /// |
107 | /// It's a shorthand for iro-bem-state('is', $state, $states...). | 111 | /// It's a shorthand for state('is', $state, $states...). |
108 | /// | 112 | /// |
109 | @mixin iro-bem-is($state, $states...) { | 113 | @mixin is($state, $states...) { |
110 | @include iro-bem-state('is', $state, $states...) { | 114 | @include state('is', $state, $states...) { |
111 | @content; | 115 | @content; |
112 | } | 116 | } |
113 | } | 117 | } |
@@ -117,19 +121,19 @@ | |||
117 | /// | 121 | /// |
118 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 122 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
119 | /// | 123 | /// |
120 | /// @see {mixin} iro-bem-is | 124 | /// @see {mixin} is |
121 | /// | 125 | /// |
122 | @function iro-bem-is($state, $states...) { | 126 | @function is($state, $states...) { |
123 | @return iro-bem-state('is', $state, $states...); | 127 | @return state('is', $state, $states...); |
124 | } | 128 | } |
125 | 129 | ||
126 | /// | 130 | /// |
127 | /// Create a new has-state modifier. | 131 | /// Create a new has-state modifier. |
128 | /// | 132 | /// |
129 | /// It's a shorthand for iro-bem-state('has', $state, $states...). | 133 | /// It's a shorthand for state('has', $state, $states...). |
130 | /// | 134 | /// |
131 | @mixin iro-bem-has($state, $states...) { | 135 | @mixin has($state, $states...) { |
132 | @include iro-bem-state('has', $state, $states...) { | 136 | @include state('has', $state, $states...) { |
133 | @content; | 137 | @content; |
134 | } | 138 | } |
135 | } | 139 | } |
@@ -139,8 +143,8 @@ | |||
139 | /// | 143 | /// |
140 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 144 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
141 | /// | 145 | /// |
142 | /// @see {mixin} iro-bem-has | 146 | /// @see {mixin} has |
143 | /// | 147 | /// |
144 | @function iro-bem-has($state, $states...) { | 148 | @function has($state, $states...) { |
145 | @return iro-bem-state('has', $state, $states...); | 149 | @return state('has', $state, $states...); |
146 | } | 150 | } |
diff --git a/src/bem/_suffix.scss b/src/bem/_suffix.scss index b103c9f..2ddb54d 100644 --- a/src/bem/_suffix.scss +++ b/src/bem/_suffix.scss | |||
@@ -4,6 +4,11 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @use './validators'; | ||
8 | @use './vars'; | ||
9 | @use '../functions'; | ||
10 | @use '../contexts'; | ||
11 | |||
7 | /// | 12 | /// |
8 | /// Generate a new suffix. | 13 | /// Generate a new suffix. |
9 | /// | 14 | /// |
@@ -14,17 +19,17 @@ | |||
14 | /// @throw If the element is not preceded by a block or modifier. | 19 | /// @throw If the element is not preceded by a block or modifier. |
15 | /// | 20 | /// |
16 | /// @example scss - Using a suffix | 21 | /// @example scss - Using a suffix |
17 | /// @include iro-bem-utility('hidden') { | 22 | /// @include utility('hidden') { |
18 | /// display: none; | 23 | /// display: none; |
19 | /// | 24 | /// |
20 | /// @media (max-width: 320px) { | 25 | /// @media (max-width: 320px) { |
21 | /// @include iro-bem-suffix('phone') { | 26 | /// @include suffix('phone') { |
22 | /// display: none; | 27 | /// display: none; |
23 | /// } | 28 | /// } |
24 | /// } | 29 | /// } |
25 | /// | 30 | /// |
26 | /// @media (max-width: 768px) { | 31 | /// @media (max-width: 768px) { |
27 | /// @include iro-bem-suffix('tablet') { | 32 | /// @include suffix('tablet') { |
28 | /// display: none; | 33 | /// display: none; |
29 | /// } | 34 | /// } |
30 | /// } | 35 | /// } |
@@ -48,23 +53,23 @@ | |||
48 | /// } | 53 | /// } |
49 | /// } | 54 | /// } |
50 | /// | 55 | /// |
51 | @mixin iro-bem-suffix($name) { | 56 | @mixin suffix($name) { |
52 | $result: iro-bem-suffix($name); | 57 | $result: suffix($name); |
53 | $selector: nth($result, 1); | 58 | $selector: nth($result, 1); |
54 | $context: nth($result, 2); | 59 | $context: nth($result, 2); |
55 | 60 | ||
56 | @include iro-bem-validate( | 61 | @include validators.validate( |
57 | 'suffix', | 62 | 'suffix', |
58 | (name: $name), | 63 | (name: $name), |
59 | $selector, | 64 | $selector, |
60 | $context | 65 | $context |
61 | ); | 66 | ); |
62 | 67 | ||
63 | @include iro-context-push($iro-bem-context-id, $context...); | 68 | @include contexts.push(vars.$context-id, $context...); |
64 | @at-root #{$selector} { | 69 | @at-root #{$selector} { |
65 | @content; | 70 | @content; |
66 | } | 71 | } |
67 | @include iro-context-pop($iro-bem-context-id); | 72 | @include contexts.pop(vars.$context-id); |
68 | } | 73 | } |
69 | 74 | ||
70 | /// | 75 | /// |
@@ -72,21 +77,21 @@ | |||
72 | /// | 77 | /// |
73 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 78 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
74 | /// | 79 | /// |
75 | /// @see {mixin} iro-bem-suffix | 80 | /// @see {mixin} suffix |
76 | /// | 81 | /// |
77 | @function iro-bem-suffix($name) { | 82 | @function suffix($name) { |
78 | // | 83 | // |
79 | // Suffixes can be used on block, element and modifier. | 84 | // Suffixes can be used on block, element and modifier. |
80 | // | 85 | // |
81 | 86 | ||
82 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 87 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
83 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); | 88 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); |
84 | $noop: iro-context-assert-stack-must-not-contain($iro-bem-context-id, 'suffix'); | 89 | $noop: contexts.assert-stack-must-not-contain(vars.$context-id, 'suffix'); |
85 | 90 | ||
86 | $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier'); | 91 | $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier'); |
87 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); | 92 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); |
88 | 93 | ||
89 | @if not iro-selector-suffix-match(&, $parent-selector) { | 94 | @if not functions.selector-suffix-match(&, $parent-selector) { |
90 | // | 95 | // |
91 | // The current selector doesn't match the parent selector. | 96 | // The current selector doesn't match the parent selector. |
92 | // The user manually added a selector between parent context and this suffix call. | 97 | // The user manually added a selector between parent context and this suffix call. |
@@ -107,7 +112,7 @@ | |||
107 | // - {b,e,m}@suffix | 112 | // - {b,e,m}@suffix |
108 | // | 113 | // |
109 | 114 | ||
110 | $selector: selector-append(&, $iro-bem-suffix-separator + $name); | 115 | $selector: selector-append(&, vars.$suffix-separator + $name); |
111 | 116 | ||
112 | $context: 'suffix', ( | 117 | $context: 'suffix', ( |
113 | 'name': $name, | 118 | 'name': $name, |
diff --git a/src/bem/_theme.scss b/src/bem/_theme.scss index a49981c..ff1ba49 100644 --- a/src/bem/_theme.scss +++ b/src/bem/_theme.scss | |||
@@ -4,6 +4,11 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @use './functions'; | ||
8 | @use './validators'; | ||
9 | @use './vars'; | ||
10 | @use '../contexts'; | ||
11 | |||
7 | /// | 12 | /// |
8 | /// Declare new rules for the current block for when this theme is active. | 13 | /// Declare new rules for the current block for when this theme is active. |
9 | /// | 14 | /// |
@@ -12,23 +17,23 @@ | |||
12 | /// | 17 | /// |
13 | /// @content | 18 | /// @content |
14 | /// | 19 | /// |
15 | @mixin iro-bem-at-theme($name, $names...) { | 20 | @mixin at-theme($name, $names...) { |
16 | $result: iro-bem-at-theme($name, $names...); | 21 | $result: at-theme($name, $names...); |
17 | $selector: nth($result, 1); | 22 | $selector: nth($result, 1); |
18 | $context: nth($result, 2); | 23 | $context: nth($result, 2); |
19 | 24 | ||
20 | @include iro-bem-validate( | 25 | @include validators.validate( |
21 | 'at-theme', | 26 | 'at-theme', |
22 | (name: $name, names: $names), | 27 | (name: $name, names: $names), |
23 | $selector, | 28 | $selector, |
24 | $context | 29 | $context |
25 | ); | 30 | ); |
26 | 31 | ||
27 | @include iro-context-push($iro-bem-context-id, $context...); | 32 | @include contexts.push(vars.$context-id, $context...); |
28 | @at-root #{$selector} { | 33 | @at-root #{$selector} { |
29 | @content; | 34 | @content; |
30 | } | 35 | } |
31 | @include iro-context-pop($iro-bem-context-id); | 36 | @include contexts.pop(vars.$context-id); |
32 | } | 37 | } |
33 | 38 | ||
34 | /// | 39 | /// |
@@ -37,19 +42,19 @@ | |||
37 | /// | 42 | /// |
38 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 43 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
39 | /// | 44 | /// |
40 | /// @see {mixin} iro-bem-at-theme | 45 | /// @see {mixin} at-theme |
41 | /// | 46 | /// |
42 | @function iro-bem-at-theme($name, $names...) { | 47 | @function at-theme($name, $names...) { |
43 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); | 48 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); |
44 | 49 | ||
45 | $parent-context: iro-context-get($iro-bem-context-id, 'block'); | 50 | $parent-context: contexts.get(vars.$context-id, 'block'); |
46 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); | 51 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); |
47 | 52 | ||
48 | //@if not iro-selector-suffix-match(&, $parent-selector) { | 53 | //@if not functions.selector-suffix-match(&, $parent-selector) { |
49 | // @error 'An at-theme rule must be an immediate child of a block'; | 54 | // @error 'An at-theme rule must be an immediate child of a block'; |
50 | //} | 55 | //} |
51 | 56 | ||
52 | $selector: iro-bem-theme-selector($name, $names...); | 57 | $selector: functions.theme-selector($name, $names...); |
53 | $selector: selector-nest($selector, &); | 58 | $selector: selector-nest($selector, &); |
54 | 59 | ||
55 | $context: 'at-theme', ( | 60 | $context: 'at-theme', ( |
diff --git a/src/bem/_validators.scss b/src/bem/_validators.scss index eb09a60..042e15e 100644 --- a/src/bem/_validators.scss +++ b/src/bem/_validators.scss | |||
@@ -16,6 +16,10 @@ | |||
16 | /// @access public | 16 | /// @access public |
17 | //// | 17 | //// |
18 | 18 | ||
19 | @use './vars'; | ||
20 | @use '../functions'; | ||
21 | @use '../contexts'; | ||
22 | |||
19 | /// | 23 | /// |
20 | /// A list of validator functions. | 24 | /// A list of validator functions. |
21 | /// | 25 | /// |
@@ -23,7 +27,7 @@ | |||
23 | /// | 27 | /// |
24 | /// @access private | 28 | /// @access private |
25 | /// | 29 | /// |
26 | $iro-bem-validators: (); | 30 | $validators: (); |
27 | 31 | ||
28 | /// | 32 | /// |
29 | /// Register one or multiple validator functions. | 33 | /// Register one or multiple validator functions. |
@@ -41,19 +45,19 @@ $iro-bem-validators: (); | |||
41 | /// @param {string} $func-name - First function name. | 45 | /// @param {string} $func-name - First function name. |
42 | /// @param {string} $func-names - Other function names. | 46 | /// @param {string} $func-names - Other function names. |
43 | /// | 47 | /// |
44 | @mixin iro-bem-add-validator($func-name, $func-names...) { | 48 | @mixin add($func-name, $func-names...) { |
45 | $noop: iro-bem-add-validator($func-name, $func-names...); | 49 | $noop: add($func-name, $func-names...); |
46 | } | 50 | } |
47 | 51 | ||
48 | /// | 52 | /// |
49 | /// Register one or multiple validator functions. Check the respective mixin documentation for more information. | 53 | /// Register one or multiple validator functions. Check the respective mixin documentation for more information. |
50 | /// | 54 | /// |
51 | /// @see {mixin} iro-bem-add-validator | 55 | /// @see {mixin} add |
52 | /// | 56 | /// |
53 | @function iro-bem-add-validator($func-name, $func-names...) { | 57 | @function add($func-name, $func-names...) { |
54 | @each $fn-name in join($func-name, $func-names) { | 58 | @each $fn-name in join($func-name, $func-names) { |
55 | $fn: get-function($fn-name); | 59 | $fn: get-function($fn-name); |
56 | $iro-bem-validators: map-merge($iro-bem-validators, ($fn-name: $fn)) !global; | 60 | $validators: map-merge($validators, ($fn-name: $fn)); |
57 | } | 61 | } |
58 | @return null; | 62 | @return null; |
59 | } | 63 | } |
@@ -64,25 +68,25 @@ $iro-bem-validators: (); | |||
64 | /// @param {string} $func-name - First function name. | 68 | /// @param {string} $func-name - First function name. |
65 | /// @param {string} $func-names - Other function names. | 69 | /// @param {string} $func-names - Other function names. |
66 | /// | 70 | /// |
67 | @mixin iro-bem-remove-validator($func-name, $func-names...) { | 71 | @mixin remove($func-name, $func-names...) { |
68 | $noop: iro-bem-remove-validator($func-name, $func-names...); | 72 | $noop: remove($func-name, $func-names...); |
69 | } | 73 | } |
70 | 74 | ||
71 | /// | 75 | /// |
72 | /// Unregister one or multiple validator functions. Check the respective mixin documentation for more information. | 76 | /// Unregister one or multiple validator functions. Check the respective mixin documentation for more information. |
73 | /// | 77 | /// |
74 | /// @see {mixin} iro-bem-remove-validator | 78 | /// @see {mixin} remove |
75 | /// | 79 | /// |
76 | @function iro-bem-remove-validator($func-name, $func-names...) { | 80 | @function remove($func-name, $func-names...) { |
77 | $iro-bem-validators: map-remove($iro-bem-validators, $func-name, $func-names...) !global; | 81 | $validators: map-remove($validators, $func-name, $func-names...); |
78 | @return null; | 82 | @return null; |
79 | } | 83 | } |
80 | 84 | ||
81 | /// | 85 | /// |
82 | /// @access private | 86 | /// @access private |
83 | /// | 87 | /// |
84 | @mixin iro-bem-validate($type, $args, $selector, $context) { | 88 | @mixin validate($type, $args, $selector, $context) { |
85 | @each $id, $fn in $iro-bem-validators { | 89 | @each $id, $fn in $validators { |
86 | $result: call($fn, $type, $args, $selector, $context); | 90 | $result: call($fn, $type, $args, $selector, $context); |
87 | @if not nth($result, 1) { | 91 | @if not nth($result, 1) { |
88 | @error 'A BEM validator rejected this mixin usage due to the following reason: #{nth($result, 2)}'; | 92 | @error 'A BEM validator rejected this mixin usage due to the following reason: #{nth($result, 2)}'; |
@@ -100,26 +104,26 @@ $iro-bem-validators: (); | |||
100 | /// A validator that makes sure blocks are declared in the right order, determined by the | 104 | /// A validator that makes sure blocks are declared in the right order, determined by the |
101 | /// namespace used. | 105 | /// namespace used. |
102 | /// | 106 | /// |
103 | @function iro-bem-validator--enforce-namespace-order($type, $args, $selector, $context) { | 107 | @function enforce-namespace-order($type, $args, $selector, $context) { |
104 | @if not global-variable-exists(iro-bem-namespace-order) { | 108 | @if not global-variable-exists(namespace-order, vars) { |
105 | $iro-bem-namespace-order: map-keys($iro-bem-namespaces) !global; | 109 | vars.$namespace-order: map-keys(vars.$namespaces); |
106 | } | 110 | } |
107 | @if not global-variable-exists(iro-bem-cur-namespace-index) { | 111 | @if not global-variable-exists(cur-namespace-index, vars) { |
108 | $iro-bem-cur-namespace-index: 1 !global; | 112 | vars.$cur-namespace-index: 1; |
109 | } | 113 | } |
110 | 114 | ||
111 | @if $type == 'block' { | 115 | @if $type == 'block' { |
112 | $block-type: map-get($args, 'type'); | 116 | $block-type: map-get($args, 'type'); |
113 | 117 | ||
114 | @if $block-type != null { | 118 | @if $block-type != null { |
115 | $ns-index: index($iro-bem-namespace-order, $block-type); | 119 | $ns-index: index(vars.$namespace-order, $block-type); |
116 | 120 | ||
117 | @if $ns-index != null { | 121 | @if $ns-index != null { |
118 | @if $ns-index < $iro-bem-cur-namespace-index { | 122 | @if $ns-index < vars.$cur-namespace-index { |
119 | @return false 'Namespace "#{$block-type}" comes before current namespace #{nth($iro-bem-namespace-order, $iro-bem-cur-namespace-index)}'; | 123 | @return false 'Namespace "#{$block-type}" comes before current namespace #{nth(vars.$namespace-order, vars.$cur-namespace-index)}'; |
120 | } | 124 | } |
121 | 125 | ||
122 | $iro-bem-cur-namespace-index: $ns-index !global; | 126 | vars.$cur-namespace-index: $ns-index; |
123 | } | 127 | } |
124 | } | 128 | } |
125 | } | 129 | } |
@@ -130,9 +134,9 @@ $iro-bem-validators: (); | |||
130 | /// | 134 | /// |
131 | /// A validator that makes all BEM entities immutable. | 135 | /// A validator that makes all BEM entities immutable. |
132 | /// | 136 | /// |
133 | @function iro-bem-validator--immutable-entities($type, $args, $selector, $context) { | 137 | @function immutable-entities($type, $args, $selector, $context) { |
134 | @if not global-variable-exists(iro-bem-generated-selectors) { | 138 | @if not global-variable-exists(generated-selectors, vars) { |
135 | $iro-bem-generated-selectors: () !global; | 139 | vars.$generated-selectors: (); |
136 | } | 140 | } |
137 | 141 | ||
138 | $block-name: null; | 142 | $block-name: null; |
@@ -143,7 +147,7 @@ $iro-bem-validators: (); | |||
143 | $block-name: map-get($args, 'name'); | 147 | $block-name: map-get($args, 'name'); |
144 | $block-type: map-get($args, 'type'); | 148 | $block-type: map-get($args, 'type'); |
145 | } @else { | 149 | } @else { |
146 | $block-context: iro-context-get($iro-bem-context-id, 'block'); | 150 | $block-context: contexts.get(vars.$context-id, 'block'); |
147 | $block-name: map-get(nth($block-context, 2), 'name'); | 151 | $block-name: map-get(nth($block-context, 2), 'name'); |
148 | $block-type: map-get(nth($block-context, 2), 'type'); | 152 | $block-type: map-get(nth($block-context, 2), 'type'); |
149 | } | 153 | } |
@@ -155,21 +159,21 @@ $iro-bem-validators: (); | |||
155 | } | 159 | } |
156 | 160 | ||
157 | @if $type == 'block' { | 161 | @if $type == 'block' { |
158 | @if map-has-key($iro-bem-generated-selectors, $block-id) { | 162 | @if map-has-key(vars.$generated-selectors, $block-id) { |
159 | @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; | 163 | @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.'; |
160 | } | 164 | } |
161 | 165 | ||
162 | $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: ())) !global; | 166 | vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: ())); |
163 | } @else { | 167 | } @else { |
164 | $selectors: map-get($iro-bem-generated-selectors, $block-id); | 168 | $selectors: map-get(vars.$generated-selectors, $block-id); |
165 | 169 | ||
166 | @if index($selectors, $selector) { | 170 | @if index($selectors, $selector) { |
167 | @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; | 171 | @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.'; |
168 | } | 172 | } |
169 | 173 | ||
170 | $selectors: append($selectors, $selector); | 174 | $selectors: append($selectors, $selector); |
171 | 175 | ||
172 | $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: $selectors)) !global; | 176 | vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: $selectors)); |
173 | } | 177 | } |
174 | 178 | ||
175 | @return true ''; | 179 | @return true ''; |
diff --git a/src/bem/_vars.scss b/src/bem/_vars.scss index 5942d4f..3d0f92a 100644 --- a/src/bem/_vars.scss +++ b/src/bem/_vars.scss | |||
@@ -9,21 +9,21 @@ | |||
9 | /// | 9 | /// |
10 | /// @type string | 10 | /// @type string |
11 | /// | 11 | /// |
12 | $iro-bem-element-separator: '__' !default; | 12 | $element-separator: '__' !default; |
13 | 13 | ||
14 | /// | 14 | /// |
15 | /// Separating character sequence for modifiers. | 15 | /// Separating character sequence for modifiers. |
16 | /// | 16 | /// |
17 | /// @type string | 17 | /// @type string |
18 | /// | 18 | /// |
19 | $iro-bem-modifier-separator: '--' !default; | 19 | $modifier-separator: '--' !default; |
20 | 20 | ||
21 | /// | 21 | /// |
22 | /// Separating character sequence for BEMIT suffixes. | 22 | /// Separating character sequence for BEMIT suffixes. |
23 | /// | 23 | /// |
24 | /// @type string | 24 | /// @type string |
25 | /// | 25 | /// |
26 | $iro-bem-suffix-separator: '\\@' !default; | 26 | $suffix-separator: '\\@' !default; |
27 | 27 | ||
28 | /// | 28 | /// |
29 | /// Prefixes for all BEMIT namespaces. | 29 | /// Prefixes for all BEMIT namespaces. |
@@ -40,7 +40,7 @@ $iro-bem-suffix-separator: '\\@' !default; | |||
40 | /// | 40 | /// |
41 | /// @type map | 41 | /// @type map |
42 | /// | 42 | /// |
43 | $iro-bem-namespaces: ( | 43 | $namespaces: ( |
44 | object: 'o', | 44 | object: 'o', |
45 | component: 'c', | 45 | component: 'c', |
46 | layout: 'l', | 46 | layout: 'l', |
@@ -59,14 +59,14 @@ $iro-bem-namespaces: ( | |||
59 | /// | 59 | /// |
60 | /// @access private | 60 | /// @access private |
61 | /// | 61 | /// |
62 | $iro-bem-blocks: (); | 62 | $blocks: (); |
63 | 63 | ||
64 | /// | 64 | /// |
65 | /// Maximum nesting depth of BEM mixins. The large default value means there is no effective limit. | 65 | /// Maximum nesting depth of BEM mixins. The large default value means there is no effective limit. |
66 | /// | 66 | /// |
67 | /// @type number | 67 | /// @type number |
68 | /// | 68 | /// |
69 | $iro-bem-max-depth: 99 !default; | 69 | $max-depth: 99 !default; |
70 | 70 | ||
71 | /// | 71 | /// |
72 | /// Indicates how nested elements should be handled. | 72 | /// Indicates how nested elements should be handled. |
@@ -78,28 +78,28 @@ $iro-bem-max-depth: 99 !default; | |||
78 | /// | 78 | /// |
79 | /// @type string | 79 | /// @type string |
80 | /// | 80 | /// |
81 | $iro-bem-element-nesting-policy: 'allow' !default; | 81 | $element-nesting-policy: 'allow' !default; |
82 | 82 | ||
83 | /// | 83 | /// |
84 | /// Context ID used for all BEM-related mixins. | 84 | /// Context ID used for all BEM-related mixins. |
85 | /// | 85 | /// |
86 | /// @type string | 86 | /// @type string |
87 | /// | 87 | /// |
88 | $iro-bem-context-id: 'bem' !default; | 88 | $context-id: 'bem' !default; |
89 | 89 | ||
90 | /// | 90 | /// |
91 | /// Debug mode. | 91 | /// Debug mode. |
92 | /// | 92 | /// |
93 | /// @type bool | 93 | /// @type bool |
94 | /// | 94 | /// |
95 | $iro-bem-debug: false !default; | 95 | $debug: false !default; |
96 | 96 | ||
97 | /// | 97 | /// |
98 | /// Colors assigned to namespaces. | 98 | /// Colors assigned to namespaces. |
99 | /// | 99 | /// |
100 | /// @type map | 100 | /// @type map |
101 | /// | 101 | /// |
102 | $iro-bem-debug-colors: ( | 102 | $debug-colors: ( |
103 | object: #ffa500, | 103 | object: #ffa500, |
104 | component: #00f, | 104 | component: #00f, |
105 | layout: #ff0, | 105 | layout: #ff0, |