diff options
| author | Volpeon <git@volpeon.ink> | 2025-08-13 12:01:46 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2025-08-13 12:01:46 +0200 |
| commit | f0f84513f8efe533b6ee670a6f1a0c074387b2ec (patch) | |
| tree | 845bc4bacf1bd99acb0dfcc7e4545a36b544d2f8 /test/bem/_related-element.scss | |
| parent | More fix (diff) | |
| download | iro-sass-f0f84513f8efe533b6ee670a6f1a0c074387b2ec.tar.gz iro-sass-f0f84513f8efe533b6ee670a6f1a0c074387b2ec.tar.bz2 iro-sass-f0f84513f8efe533b6ee670a6f1a0c074387b2ec.zip | |
Diffstat (limited to 'test/bem/_related-element.scss')
| -rw-r--r-- | test/bem/_related-element.scss | 752 |
1 files changed, 376 insertions, 376 deletions
diff --git a/test/bem/_related-element.scss b/test/bem/_related-element.scss index 5a829e8..48b3457 100644 --- a/test/bem/_related-element.scss +++ b/test/bem/_related-element.scss | |||
| @@ -20,443 +20,443 @@ | |||
| 20 | // | 20 | // |
| 21 | 21 | ||
| 22 | @include it('related-element') { | 22 | @include it('related-element') { |
| 23 | @include assert('single element, single related element') { /// 1 /// | 23 | @include assert('single element, single related element') { /// 1 /// |
| 24 | @include output { | 24 | @include output { |
| 25 | @include bem.block('something') { | 25 | @include bem.block('something') { |
| 26 | @include bem.elem('child') { | 26 | @include bem.elem('child') { |
| 27 | @include bem.related-elem('+', 'subchild1') { | 27 | @include bem.related-elem('+', 'subchild1') { |
| 28 | font-size: 2em; | 28 | font-size: 2em; |
| 29 | } | 29 | } |
| 30 | 30 | ||
| 31 | @include bem.related-elem('~', 'subchild2') { | 31 | @include bem.related-elem('~', 'subchild2') { |
| 32 | font-size: 2em; | 32 | font-size: 2em; |
| 33 | } | 33 | } |
| 34 | } | 34 | } |
| 35 | } | 35 | } |
| 36 | } | 36 | } |
| 37 | 37 | ||
| 38 | @include expect { | 38 | @include expect { |
| 39 | .something__child + .something__subchild1 { | 39 | .something__child + .something__subchild1 { |
| 40 | font-size: 2em; | 40 | font-size: 2em; |
| 41 | } | 41 | } |
| 42 | 42 | ||
| 43 | .something__child ~ .something__subchild2 { | 43 | .something__child ~ .something__subchild2 { |
| 44 | font-size: 2em; | 44 | font-size: 2em; |
| 45 | } | 45 | } |
| 46 | } | 46 | } |
| 47 | } | 47 | } |
| 48 | 48 | ||
| 49 | @include assert('single element, single related element, manual selector in-between') { /// 2 /// | 49 | @include assert('single element, single related element, manual selector in-between') { /// 2 /// |
| 50 | @include output(false) { | 50 | @include output(false) { |
| 51 | @include bem.block('something') { | 51 | @include bem.block('something') { |
| 52 | @include bem.elem('child') { | 52 | @include bem.elem('child') { |
| 53 | &:hover { | 53 | &:hover { |
| 54 | @include bem.related-elem('+', 'subchild1') { | 54 | @include bem.related-elem('+', 'subchild1') { |
| 55 | font-size: 2em; | 55 | font-size: 2em; |
| 56 | } | 56 | } |
| 57 | 57 | ||
| 58 | @include bem.related-elem('~', 'subchild2') { | 58 | @include bem.related-elem('~', 'subchild2') { |
| 59 | font-size: 2em; | 59 | font-size: 2em; |
| 60 | } | 60 | } |
| 61 | } | 61 | } |
| 62 | 62 | ||
| 63 | .test & { | 63 | .test & { |
| 64 | @include bem.related-elem('+', 'subchild3') { | 64 | @include bem.related-elem('+', 'subchild3') { |
| 65 | font-size: 2em; | 65 | font-size: 2em; |
| 66 | } | 66 | } |
| 67 | 67 | ||
| 68 | @include bem.related-elem('~', 'subchild4') { | 68 | @include bem.related-elem('~', 'subchild4') { |
| 69 | font-size: 2em; | 69 | font-size: 2em; |
| 70 | } | 70 | } |
| 71 | } | 71 | } |
| 72 | } | 72 | } |
| 73 | } | 73 | } |
| 74 | } | 74 | } |
| 75 | 75 | ||
| 76 | @include expect(false) { | 76 | @include expect(false) { |
| 77 | .something__child:hover + .something__subchild1 { | 77 | .something__child:hover + .something__subchild1 { |
| 78 | font-size: 2em; | 78 | font-size: 2em; |
| 79 | } | 79 | } |
| 80 | 80 | ||
| 81 | .something__child:hover ~ .something__subchild2 { | 81 | .something__child:hover ~ .something__subchild2 { |
| 82 | font-size: 2em; | 82 | font-size: 2em; |
| 83 | } | 83 | } |
| 84 | 84 | ||
| 85 | .test .something__child + .something__subchild3 { | 85 | .test .something__child + .something__subchild3 { |
| 86 | font-size: 2em; | 86 | font-size: 2em; |
| 87 | } | 87 | } |
| 88 | 88 | ||
| 89 | .test .something__child ~ .something__subchild4 { | 89 | .test .something__child ~ .something__subchild4 { |
| 90 | font-size: 2em; | 90 | font-size: 2em; |
| 91 | } | 91 | } |
| 92 | } | 92 | } |
| 93 | } | 93 | } |
| 94 | 94 | ||
| 95 | @include assert('single element, single related element, modifier in-between') { /// 3 /// | 95 | @include assert('single element, single related element, modifier in-between') { /// 3 /// |
| 96 | @include output { | 96 | @include output { |
| 97 | @include bem.block('something') { | 97 | @include bem.block('something') { |
| 98 | @include bem.elem('child') { | 98 | @include bem.elem('child') { |
| 99 | @include bem.modifier('mod') { | 99 | @include bem.modifier('mod') { |
| 100 | @include bem.related-elem('+', 'subchild1') { | 100 | @include bem.related-elem('+', 'subchild1') { |
| 101 | font-size: 2.5em; | 101 | font-size: 2.5em; |
| 102 | } | 102 | } |
| 103 | 103 | ||
| 104 | @include bem.related-elem('~', 'subchild2') { | 104 | @include bem.related-elem('~', 'subchild2') { |
| 105 | font-size: 2.5em; | 105 | font-size: 2.5em; |
| 106 | } | 106 | } |
| 107 | } | 107 | } |
| 108 | } | 108 | } |
| 109 | } | 109 | } |
| 110 | } | 110 | } |
| 111 | 111 | ||
| 112 | @include expect { | 112 | @include expect { |
| 113 | .something__child--mod + .something__subchild1 { | 113 | .something__child--mod + .something__subchild1 { |
| 114 | font-size: 2.5em; | 114 | font-size: 2.5em; |
| 115 | } | 115 | } |
| 116 | 116 | ||
| 117 | .something__child--mod ~ .something__subchild2 { | 117 | .something__child--mod ~ .something__subchild2 { |
| 118 | font-size: 2.5em; | 118 | font-size: 2.5em; |
| 119 | } | 119 | } |
| 120 | } | 120 | } |
| 121 | } | 121 | } |
| 122 | 122 | ||
| 123 | @include assert('single element, multiple related elements') { /// 4 /// | 123 | @include assert('single element, multiple related elements') { /// 4 /// |
| 124 | @include output { | 124 | @include output { |
| 125 | @include bem.block('something') { | 125 | @include bem.block('something') { |
| 126 | @include bem.elem('child') { | 126 | @include bem.elem('child') { |
| 127 | @include bem.related-elem('+', 'subchild1', 'subchild2') { | 127 | @include bem.related-elem('+', 'subchild1', 'subchild2') { |
| 128 | font-size: 2.5em; | 128 | font-size: 2.5em; |
| 129 | } | 129 | } |
| 130 | 130 | ||
| 131 | @include bem.related-elem('~', 'subchild3', 'subchild4') { | 131 | @include bem.related-elem('~', 'subchild3', 'subchild4') { |
| 132 | font-size: 2.5em; | 132 | font-size: 2.5em; |
| 133 | } | 133 | } |
| 134 | } | 134 | } |
| 135 | } | 135 | } |
| 136 | } | 136 | } |
| 137 | 137 | ||
| 138 | @include expect { | 138 | @include expect { |
| 139 | .something__child + .something__subchild1, | 139 | .something__child + .something__subchild1, |
| 140 | .something__child + .something__subchild2 { | 140 | .something__child + .something__subchild2 { |
| 141 | font-size: 2.5em; | 141 | font-size: 2.5em; |
| 142 | } | 142 | } |
| 143 | 143 | ||
| 144 | .something__child ~ .something__subchild3, | 144 | .something__child ~ .something__subchild3, |
| 145 | .something__child ~ .something__subchild4 { | 145 | .something__child ~ .something__subchild4 { |
| 146 | font-size: 2.5em; | 146 | font-size: 2.5em; |
| 147 | } | 147 | } |
| 148 | } | 148 | } |
| 149 | } | 149 | } |
| 150 | 150 | ||
| 151 | @include assert('single element, multiple related elements, manual selector in-between') { /// 5 /// | 151 | @include assert('single element, multiple related elements, manual selector in-between') { /// 5 /// |
| 152 | @include output(false) { | 152 | @include output(false) { |
| 153 | @include bem.block('something') { | 153 | @include bem.block('something') { |
| 154 | @include bem.elem('child') { | 154 | @include bem.elem('child') { |
| 155 | &:hover { | 155 | &:hover { |
| 156 | @include bem.related-elem('+', 'subchild1', 'subchild2') { | 156 | @include bem.related-elem('+', 'subchild1', 'subchild2') { |
| 157 | font-size: 2.5em; | 157 | font-size: 2.5em; |
| 158 | } | 158 | } |
| 159 | 159 | ||
| 160 | @include bem.related-elem('~', 'subchild3', 'subchild4') { | 160 | @include bem.related-elem('~', 'subchild3', 'subchild4') { |
| 161 | font-size: 2.5em; | 161 | font-size: 2.5em; |
| 162 | } | 162 | } |
| 163 | } | 163 | } |
| 164 | 164 | ||
| 165 | .test & { | 165 | .test & { |
| 166 | @include bem.related-elem('+', 'subchild5', 'subchild6') { | 166 | @include bem.related-elem('+', 'subchild5', 'subchild6') { |
| 167 | font-size: 2.5em; | 167 | font-size: 2.5em; |
| 168 | } | 168 | } |
| 169 | 169 | ||
| 170 | @include bem.related-elem('~', 'subchild7', 'subchild8') { | 170 | @include bem.related-elem('~', 'subchild7', 'subchild8') { |
| 171 | font-size: 2.5em; | 171 | font-size: 2.5em; |
| 172 | } | 172 | } |
| 173 | } | 173 | } |
| 174 | } | 174 | } |
| 175 | } | 175 | } |
| 176 | } | 176 | } |
| 177 | 177 | ||
| 178 | @include expect(false) { | 178 | @include expect(false) { |
| 179 | .something__child:hover + .something__subchild1, | 179 | .something__child:hover + .something__subchild1, |
| 180 | .something__child:hover + .something__subchild2 { | 180 | .something__child:hover + .something__subchild2 { |
| 181 | font-size: 2.5em; | 181 | font-size: 2.5em; |
| 182 | } | 182 | } |
| 183 | 183 | ||
| 184 | .something__child:hover ~ .something__subchild3, | 184 | .something__child:hover ~ .something__subchild3, |
| 185 | .something__child:hover ~ .something__subchild4 { | 185 | .something__child:hover ~ .something__subchild4 { |
| 186 | font-size: 2.5em; | 186 | font-size: 2.5em; |
| 187 | } | 187 | } |
| 188 | 188 | ||
| 189 | .test .something__child + .something__subchild5, | 189 | .test .something__child + .something__subchild5, |
| 190 | .test .something__child + .something__subchild6 { | 190 | .test .something__child + .something__subchild6 { |
| 191 | font-size: 2.5em; | 191 | font-size: 2.5em; |
| 192 | } | 192 | } |
| 193 | 193 | ||
| 194 | .test .something__child ~ .something__subchild7, | 194 | .test .something__child ~ .something__subchild7, |
| 195 | .test .something__child ~ .something__subchild8 { | 195 | .test .something__child ~ .something__subchild8 { |
| 196 | font-size: 2.5em; | 196 | font-size: 2.5em; |
| 197 | } | 197 | } |
| 198 | } | 198 | } |
| 199 | } | 199 | } |
| 200 | 200 | ||
| 201 | @include assert('single element, multiple related elements, modifier in-between') { /// 6 /// | 201 | @include assert('single element, multiple related elements, modifier in-between') { /// 6 /// |
| 202 | @include output { | 202 | @include output { |
| 203 | @include bem.block('something') { | 203 | @include bem.block('something') { |
| 204 | @include bem.elem('child') { | 204 | @include bem.elem('child') { |
| 205 | @include bem.modifier('mod') { | 205 | @include bem.modifier('mod') { |
| 206 | @include bem.related-elem('+', 'subchild1', 'subchild2') { | 206 | @include bem.related-elem('+', 'subchild1', 'subchild2') { |
| 207 | font-size: 2.5em; | 207 | font-size: 2.5em; |
| 208 | } | 208 | } |
| 209 | 209 | ||
| 210 | @include bem.related-elem('~', 'subchild3', 'subchild4') { | 210 | @include bem.related-elem('~', 'subchild3', 'subchild4') { |
| 211 | font-size: 2.5em; | 211 | font-size: 2.5em; |
| 212 | } | 212 | } |
| 213 | } | 213 | } |
| 214 | } | 214 | } |
| 215 | } | 215 | } |
| 216 | } | 216 | } |
| 217 | 217 | ||
| 218 | @include expect { | 218 | @include expect { |
| 219 | .something__child--mod + .something__subchild1, | 219 | .something__child--mod + .something__subchild1, |
| 220 | .something__child--mod + .something__subchild2 { | 220 | .something__child--mod + .something__subchild2 { |
| 221 | font-size: 2.5em; | 221 | font-size: 2.5em; |
| 222 | } | 222 | } |
| 223 | 223 | ||
| 224 | .something__child--mod ~ .something__subchild3, | 224 | .something__child--mod ~ .something__subchild3, |
| 225 | .something__child--mod ~ .something__subchild4 { | 225 | .something__child--mod ~ .something__subchild4 { |
| 226 | font-size: 2.5em; | 226 | font-size: 2.5em; |
| 227 | } | 227 | } |
| 228 | } | 228 | } |
| 229 | } | 229 | } |
| 230 | 230 | ||
| 231 | @include assert('multiple elements, single related element') { /// 7 /// | 231 | @include assert('multiple elements, single related element') { /// 7 /// |
| 232 | @include output { | 232 | @include output { |
| 233 | @include bem.block('something') { | 233 | @include bem.block('something') { |
| 234 | @include bem.elem('child1', 'child2') { | 234 | @include bem.elem('child1', 'child2') { |
| 235 | @include bem.related-elem('+', 'subchild1') { | 235 | @include bem.related-elem('+', 'subchild1') { |
| 236 | font-size: 2em; | 236 | font-size: 2em; |
| 237 | } | 237 | } |
| 238 | 238 | ||
| 239 | @include bem.related-elem('~', 'subchild2') { | 239 | @include bem.related-elem('~', 'subchild2') { |
| 240 | font-size: 2em; | 240 | font-size: 2em; |
| 241 | } | 241 | } |
| 242 | } | 242 | } |
| 243 | } | 243 | } |
| 244 | } | 244 | } |
| 245 | 245 | ||
| 246 | @include expect { | 246 | @include expect { |
| 247 | .something__child1 + .something__subchild1, | 247 | .something__child1 + .something__subchild1, |
| 248 | .something__child2 + .something__subchild1 { | 248 | .something__child2 + .something__subchild1 { |
| 249 | font-size: 2em; | 249 | font-size: 2em; |
| 250 | } | 250 | } |
| 251 | 251 | ||
| 252 | .something__child1 ~ .something__subchild2, | 252 | .something__child1 ~ .something__subchild2, |
| 253 | .something__child2 ~ .something__subchild2 { | 253 | .something__child2 ~ .something__subchild2 { |
| 254 | font-size: 2em; | 254 | font-size: 2em; |
| 255 | } | 255 | } |
| 256 | } | 256 | } |
| 257 | } | 257 | } |
| 258 | 258 | ||
| 259 | @include assert('multiple elements, single related element, manual selector in-between') { /// 8 /// | 259 | @include assert('multiple elements, single related element, manual selector in-between') { /// 8 /// |
| 260 | @include output(false) { | 260 | @include output(false) { |
| 261 | @include bem.block('something') { | 261 | @include bem.block('something') { |
| 262 | @include bem.elem('child1', 'child2') { | 262 | @include bem.elem('child1', 'child2') { |
| 263 | &:hover { | 263 | &:hover { |
| 264 | @include bem.related-elem('+', 'subchild1') { | 264 | @include bem.related-elem('+', 'subchild1') { |
| 265 | font-size: 2em; | 265 | font-size: 2em; |
| 266 | } | 266 | } |
| 267 | 267 | ||
| 268 | @include bem.related-elem('~', 'subchild2') { | 268 | @include bem.related-elem('~', 'subchild2') { |
| 269 | font-size: 2em; | 269 | font-size: 2em; |
| 270 | } | 270 | } |
| 271 | } | 271 | } |
| 272 | 272 | ||
| 273 | .test & { | 273 | .test & { |
| 274 | @include bem.related-elem('+', 'subchild3') { | 274 | @include bem.related-elem('+', 'subchild3') { |
| 275 | font-size: 2em; | 275 | font-size: 2em; |
| 276 | } | 276 | } |
| 277 | 277 | ||
| 278 | @include bem.related-elem('~', 'subchild4') { | 278 | @include bem.related-elem('~', 'subchild4') { |
| 279 | font-size: 2em; | 279 | font-size: 2em; |
| 280 | } | 280 | } |
| 281 | } | 281 | } |
| 282 | } | 282 | } |
| 283 | } | 283 | } |
| 284 | } | 284 | } |
| 285 | 285 | ||
| 286 | @include expect(false) { | 286 | @include expect(false) { |
| 287 | .something__child1:hover + .something__subchild1, | 287 | .something__child1:hover + .something__subchild1, |
| 288 | .something__child2:hover + .something__subchild1 { | 288 | .something__child2:hover + .something__subchild1 { |
| 289 | font-size: 2em; | 289 | font-size: 2em; |
| 290 | } | 290 | } |
| 291 | 291 | ||
| 292 | .something__child1:hover ~ .something__subchild2, | 292 | .something__child1:hover ~ .something__subchild2, |
| 293 | .something__child2:hover ~ .something__subchild2 { | 293 | .something__child2:hover ~ .something__subchild2 { |
| 294 | font-size: 2em; | 294 | font-size: 2em; |
| 295 | } | 295 | } |
| 296 | 296 | ||
| 297 | .test .something__child1 + .something__subchild3, | 297 | .test .something__child1 + .something__subchild3, |
| 298 | .test .something__child2 + .something__subchild3 { | 298 | .test .something__child2 + .something__subchild3 { |
| 299 | font-size: 2em; | 299 | font-size: 2em; |
| 300 | } | 300 | } |
| 301 | 301 | ||
| 302 | .test .something__child1 ~ .something__subchild4, | 302 | .test .something__child1 ~ .something__subchild4, |
| 303 | .test .something__child2 ~ .something__subchild4 { | 303 | .test .something__child2 ~ .something__subchild4 { |
| 304 | font-size: 2em; | 304 | font-size: 2em; |
| 305 | } | 305 | } |
| 306 | } | 306 | } |
| 307 | } | 307 | } |
| 308 | 308 | ||
| 309 | @include assert('multiple elements, single related element, modifier in-between') { /// 9 /// | 309 | @include assert('multiple elements, single related element, modifier in-between') { /// 9 /// |
| 310 | @include output { | 310 | @include output { |
| 311 | @include bem.block('something') { | 311 | @include bem.block('something') { |
| 312 | @include bem.elem('child1', 'child2') { | 312 | @include bem.elem('child1', 'child2') { |
| 313 | @include bem.modifier('mod') { | 313 | @include bem.modifier('mod') { |
| 314 | @include bem.related-elem('+', 'subchild1') { | 314 | @include bem.related-elem('+', 'subchild1') { |
| 315 | font-size: 2.5em; | 315 | font-size: 2.5em; |
| 316 | } | 316 | } |
| 317 | 317 | ||
| 318 | @include bem.related-elem('~', 'subchild2') { | 318 | @include bem.related-elem('~', 'subchild2') { |
| 319 | font-size: 2.5em; | 319 | font-size: 2.5em; |
| 320 | } | 320 | } |
| 321 | } | 321 | } |
| 322 | } | 322 | } |
| 323 | } | 323 | } |
| 324 | } | 324 | } |
| 325 | 325 | ||
| 326 | @include expect { | 326 | @include expect { |
| 327 | .something__child1--mod + .something__subchild1, | 327 | .something__child1--mod + .something__subchild1, |
| 328 | .something__child2--mod + .something__subchild1 { | 328 | .something__child2--mod + .something__subchild1 { |
| 329 | font-size: 2.5em; | 329 | font-size: 2.5em; |
| 330 | } | 330 | } |
| 331 | 331 | ||
| 332 | .something__child1--mod ~ .something__subchild2, | 332 | .something__child1--mod ~ .something__subchild2, |
| 333 | .something__child2--mod ~ .something__subchild2 { | 333 | .something__child2--mod ~ .something__subchild2 { |
| 334 | font-size: 2.5em; | 334 | font-size: 2.5em; |
| 335 | } | 335 | } |
| 336 | } | 336 | } |
| 337 | } | 337 | } |
| 338 | 338 | ||
| 339 | @include assert('multiple elements, multiple related elements') { /// 10 /// | 339 | @include assert('multiple elements, multiple related elements') { /// 10 /// |
| 340 | @include output { | 340 | @include output { |
| 341 | @include bem.block('something') { | 341 | @include bem.block('something') { |
| 342 | @include bem.elem('child1', 'child2') { | 342 | @include bem.elem('child1', 'child2') { |
| 343 | @include bem.related-elem('+', 'subchild1', 'subchild2') { | 343 | @include bem.related-elem('+', 'subchild1', 'subchild2') { |
| 344 | font-size: 2em; | 344 | font-size: 2em; |
| 345 | } | 345 | } |
| 346 | 346 | ||
| 347 | @include bem.related-elem('~', 'subchild3', 'subchild4') { | 347 | @include bem.related-elem('~', 'subchild3', 'subchild4') { |
| 348 | font-size: 2em; | 348 | font-size: 2em; |
| 349 | } | 349 | } |
| 350 | } | 350 | } |
| 351 | } | 351 | } |
| 352 | } | 352 | } |
| 353 | 353 | ||
| 354 | @include expect { | 354 | @include expect { |
| 355 | .something__child1 + .something__subchild1, | 355 | .something__child1 + .something__subchild1, |
| 356 | .something__child2 + .something__subchild1, | 356 | .something__child2 + .something__subchild1, |
| 357 | .something__child1 + .something__subchild2, | 357 | .something__child1 + .something__subchild2, |
| 358 | .something__child2 + .something__subchild2 { | 358 | .something__child2 + .something__subchild2 { |
| 359 | font-size: 2em; | 359 | font-size: 2em; |
| 360 | } | 360 | } |
| 361 | 361 | ||
| 362 | .something__child1 ~ .something__subchild3, | 362 | .something__child1 ~ .something__subchild3, |
| 363 | .something__child2 ~ .something__subchild3, | 363 | .something__child2 ~ .something__subchild3, |
| 364 | .something__child1 ~ .something__subchild4, | 364 | .something__child1 ~ .something__subchild4, |
| 365 | .something__child2 ~ .something__subchild4 { | 365 | .something__child2 ~ .something__subchild4 { |
| 366 | font-size: 2em; | 366 | font-size: 2em; |
| 367 | } | 367 | } |
| 368 | } | 368 | } |
| 369 | } | 369 | } |
| 370 | 370 | ||
| 371 | @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 /// | 371 | @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 /// |
| 372 | @include output(false) { | 372 | @include output(false) { |
| 373 | @include bem.block('something') { | 373 | @include bem.block('something') { |
| 374 | @include bem.elem('child1', 'child2') { | 374 | @include bem.elem('child1', 'child2') { |
| 375 | &:hover { | 375 | &:hover { |
| 376 | @include bem.related-elem('+', 'subchild1', 'subchild2') { | 376 | @include bem.related-elem('+', 'subchild1', 'subchild2') { |
| 377 | font-size: 2em; | 377 | font-size: 2em; |
| 378 | } | 378 | } |
| 379 | 379 | ||
| 380 | @include bem.related-elem('~', 'subchild3', 'subchild4') { | 380 | @include bem.related-elem('~', 'subchild3', 'subchild4') { |
| 381 | font-size: 2em; | 381 | font-size: 2em; |
| 382 | } | 382 | } |
| 383 | } | 383 | } |
| 384 | 384 | ||
| 385 | .test & { | 385 | .test & { |
| 386 | @include bem.related-elem('+', 'subchild5', 'subchild6') { | 386 | @include bem.related-elem('+', 'subchild5', 'subchild6') { |
| 387 | font-size: 2em; | 387 | font-size: 2em; |
| 388 | } | 388 | } |
| 389 | 389 | ||
| 390 | @include bem.related-elem('~', 'subchild7', 'subchild8') { | 390 | @include bem.related-elem('~', 'subchild7', 'subchild8') { |
| 391 | font-size: 2em; | 391 | font-size: 2em; |
| 392 | } | 392 | } |
| 393 | } | 393 | } |
| 394 | } | 394 | } |
| 395 | } | 395 | } |
| 396 | } | 396 | } |
| 397 | 397 | ||
| 398 | @include expect(false) { | 398 | @include expect(false) { |
| 399 | .something__child1:hover + .something__subchild1, | 399 | .something__child1:hover + .something__subchild1, |
| 400 | .something__child2:hover + .something__subchild1, | 400 | .something__child2:hover + .something__subchild1, |
| 401 | .something__child1:hover + .something__subchild2, | 401 | .something__child1:hover + .something__subchild2, |
| 402 | .something__child2:hover + .something__subchild2 { | 402 | .something__child2:hover + .something__subchild2 { |
| 403 | font-size: 2em; | 403 | font-size: 2em; |
| 404 | } | 404 | } |
| 405 | 405 | ||
| 406 | .something__child1:hover ~ .something__subchild3, | 406 | .something__child1:hover ~ .something__subchild3, |
| 407 | .something__child2:hover ~ .something__subchild3, | 407 | .something__child2:hover ~ .something__subchild3, |
| 408 | .something__child1:hover ~ .something__subchild4, | 408 | .something__child1:hover ~ .something__subchild4, |
| 409 | .something__child2:hover ~ .something__subchild4 { | 409 | .something__child2:hover ~ .something__subchild4 { |
| 410 | font-size: 2em; | 410 | font-size: 2em; |
| 411 | } | 411 | } |
| 412 | 412 | ||
| 413 | .test .something__child1 + .something__subchild5, | 413 | .test .something__child1 + .something__subchild5, |
| 414 | .test .something__child2 + .something__subchild5, | 414 | .test .something__child2 + .something__subchild5, |
| 415 | .test .something__child1 + .something__subchild6, | 415 | .test .something__child1 + .something__subchild6, |
| 416 | .test .something__child2 + .something__subchild6 { | 416 | .test .something__child2 + .something__subchild6 { |
| 417 | font-size: 2em; | 417 | font-size: 2em; |
| 418 | } | 418 | } |
| 419 | 419 | ||
| 420 | .test .something__child1 ~ .something__subchild7, | 420 | .test .something__child1 ~ .something__subchild7, |
| 421 | .test .something__child2 ~ .something__subchild7, | 421 | .test .something__child2 ~ .something__subchild7, |
| 422 | .test .something__child1 ~ .something__subchild8, | 422 | .test .something__child1 ~ .something__subchild8, |
| 423 | .test .something__child2 ~ .something__subchild8 { | 423 | .test .something__child2 ~ .something__subchild8 { |
| 424 | font-size: 2em; | 424 | font-size: 2em; |
| 425 | } | 425 | } |
| 426 | } | 426 | } |
| 427 | } | 427 | } |
| 428 | 428 | ||
| 429 | @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 /// | 429 | @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 /// |
| 430 | @include output { | 430 | @include output { |
| 431 | @include bem.block('something') { | 431 | @include bem.block('something') { |
| 432 | @include bem.elem('child1', 'child2') { | 432 | @include bem.elem('child1', 'child2') { |
| 433 | @include bem.modifier('mod') { | 433 | @include bem.modifier('mod') { |
| 434 | @include bem.related-elem('+', 'subchild1', 'subchild2') { | 434 | @include bem.related-elem('+', 'subchild1', 'subchild2') { |
| 435 | font-size: 2em; | 435 | font-size: 2em; |
| 436 | } | 436 | } |
| 437 | 437 | ||
| 438 | @include bem.related-elem('~', 'subchild3', 'subchild4') { | 438 | @include bem.related-elem('~', 'subchild3', 'subchild4') { |
| 439 | font-size: 2em; | 439 | font-size: 2em; |
| 440 | } | 440 | } |
| 441 | } | 441 | } |
| 442 | } | 442 | } |
| 443 | } | 443 | } |
| 444 | } | 444 | } |
| 445 | 445 | ||
| 446 | @include expect { | 446 | @include expect { |
| 447 | .something__child1--mod + .something__subchild1, | 447 | .something__child1--mod + .something__subchild1, |
| 448 | .something__child2--mod + .something__subchild1, | 448 | .something__child2--mod + .something__subchild1, |
| 449 | .something__child1--mod + .something__subchild2, | 449 | .something__child1--mod + .something__subchild2, |
| 450 | .something__child2--mod + .something__subchild2 { | 450 | .something__child2--mod + .something__subchild2 { |
| 451 | font-size: 2em; | 451 | font-size: 2em; |
| 452 | } | 452 | } |
| 453 | 453 | ||
| 454 | .something__child1--mod ~ .something__subchild3, | 454 | .something__child1--mod ~ .something__subchild3, |
| 455 | .something__child2--mod ~ .something__subchild3, | 455 | .something__child2--mod ~ .something__subchild3, |
| 456 | .something__child1--mod ~ .something__subchild4, | 456 | .something__child1--mod ~ .something__subchild4, |
| 457 | .something__child2--mod ~ .something__subchild4 { | 457 | .something__child2--mod ~ .something__subchild4 { |
| 458 | font-size: 2em; | 458 | font-size: 2em; |
| 459 | } | 459 | } |
| 460 | } | 460 | } |
| 461 | } | 461 | } |
| 462 | } | 462 | } |