1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
////
/// @group BEM
///
/// @access public
////
///
/// Generate multiple entities (BEM or not) at once.
///
/// NOTE: This mixin does not generate perfectly optimized selectors in order to keep track of contexts.
///
/// @param {string | list} $first - First selector. Either a string for a manual selector, or a list with the first items standing for a BEM selector function (optionally suffixed by a colon) and other items being passed as arguments to said function.
/// @param {string | list} $others - Other selectors. Either a string for a manual selector, or a list with the first items standing for a BEM selector function (optionally suffixed by a colon) and other items being passed as arguments to said function.
///
/// @content
///
/// @example scss - Creating multiple elements, a modifier and an anchor
/// @include iro-bem-object('buttonstrip') {
/// display: none;
///
/// @include iro-bem-multi('modifier' 'mod', 'element' 'button' 'separator', '> a') {
/// display: block;
/// }
/// }
///
/// // Generates:
///
/// .o-buttonstrip {
/// display: none;
/// }
///
/// .o-buttonstrip--mod {
/// display: block;
/// }
///
/// .o-buttonstrip__button, {
/// .o-buttonstrip__separator {
/// display: block;
/// }
///
/// .o-buttonstrip > a {
/// display: block;
/// }
///
/// @example scss - Creating multiple elements, a modifier and an anchor - optional colons included
/// @include iro-bem-object('buttonstrip') {
/// display: none;
///
/// @include iro-bem-multi('modifier:' 'mod', 'element:' 'button' 'separator', '> a') {
/// display: block;
/// }
/// }
///
/// // Generates:
///
/// .o-buttonstrip {
/// display: none;
/// }
///
/// .o-buttonstrip--mod {
/// display: block;
/// }
///
/// .o-buttonstrip__button, {
/// .o-buttonstrip__separator {
/// display: block;
/// }
///
/// .o-buttonstrip > a {
/// display: block;
/// }
///
@mixin iro-bem-multi($first, $others...) {
@include iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth);
@each $entity in iro-list-prepend($others, $first) {
$is-manual-selector: false;
@if type-of($entity) == string and not function-exists('iro-bem-' + $entity) {
$is-manual-selector: true;
}
@if $is-manual-selector {
$sel: if(&, selector-nest(&, $entity), selector-parse($entity));
@at-root #{$sel} {
@content;
}
} @else {
$entity-func-id: null;
@if type-of($entity) == list {
$entity-func-id: nth($entity, 1);
$entity: iro-list-slice($entity, 2);
} @else {
$entity-func-id: $entity;
$entity: ();
}
@if str-slice($entity-func-id, str-length($entity-func-id)) == ':' {
$entity-func-id: str-slice($entity-func-id, 1, str-length($entity-func-id) - 1);
}
$sel-func: null;
@if function-exists('iro-bem-' + $entity-func-id) {
$sel-func: get-function('iro-bem-' + $entity-func-id);
} @else if function-exists($entity-func-id) {
$sel-func: get-function($entity-func-id);
}
@if $sel-func == null {
@error 'Function "#{inspect($entity-func-id)}" was not found.';
}
$entity-result: call($sel-func, $entity...);
$entity-result-selector: nth($entity-result, 1);
$entity-result-context: nth($entity-result, 2);
@if $entity-result-context != null {
@include iro-context-push($iro-bem-context-id, $entity-result-context...);
}
@at-root #{$entity-result-selector} {
@content;
}
@if $entity-result-context != null {
@include iro-context-pop($iro-bem-context-id);
}
}
}
}
|
