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
|
////
/// @group BEM
///
/// @access public
////
@use 'sass:list';
@use 'sass:map';
@use 'sass:selector';
@use './validators';
@use './vars';
@use '../functions';
@use '../contexts';
///
/// Generate a new suffix.
///
/// @param {string} $name - Suffix name
///
/// @content
///
/// @throw If the element is not preceded by a block or modifier.
///
/// @example scss - Using a suffix
/// @include utility('hidden') {
/// display: none;
///
/// @media (max-width: 320px) {
/// @include suffix('phone') {
/// display: none;
/// }
/// }
///
/// @media (max-width: 768px) {
/// @include suffix('tablet') {
/// display: none;
/// }
/// }
/// }
///
/// // Generates:
///
/// .u-hidden {
/// display: none;
/// }
///
/// @media (max-width: 320px) {
/// .u-hidden@phone {
/// display: none;
/// }
/// }
///
/// @media (max-width: 768px) {
/// .u-hidden@tablet {
/// display: none;
/// }
/// }
///
@mixin suffix($name) {
$result: suffix($name);
$selector: list.nth($result, 1);
$context: list.nth($result, 2);
@include validators.validate(
'suffix',
(name: $name),
$selector,
$context
);
@include contexts.push(vars.$context-id, $context...);
@at-root #{$selector} {
@content;
}
@include contexts.pop(vars.$context-id);
}
///
/// Generate a new suffix. Check the respective mixin documentation for more information.
///
/// @return {list} A list with two items: 1. selector, 2. context or `null`
///
/// @see {mixin} suffix
///
@function suffix($name) {
//
// Suffixes can be used on block, element and modifier.
//
$noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
$noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
$noop: contexts.assert-stack-must-not-contain(vars.$context-id, 'suffix');
$parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier');
$parent-selector: map.get(list.nth($parent-context, 2), 'selector');
@if not functions.selector-suffix-match(&, $parent-selector) {
//
// The current selector doesn't match the parent selector.
// The user manually added a selector between parent context and this suffix call.
// This case is forbidden because any outcome semantically wouldn't make sense:
// - {b,e,m} [manual selector] {b,e,m}@suffix
// - {b,e,m}@suffix [manual selector]
// The first case would make the modifier behave like an element.
// The second case is unintuitive, the code would be more clear by nesting the manual
// selector in the suffix instead.
//
@error 'A suffix must be an immediate child of the parent context';
}
//
// The suffix part can simply be appended.
// Possible outcomes:
// - {b,e,m}@suffix
//
$selector: selector.append(&, vars.$suffix-separator + $name);
$context: 'suffix', (
'name': $name,
'selector': $selector
);
@return $selector $context;
}
|
