aboutsummaryrefslogtreecommitdiffstats
path: root/src/bem/_element.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/bem/_element.scss')
-rw-r--r--src/bem/_element.scss191
1 files changed, 98 insertions, 93 deletions
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}