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/_block.scss | |
| parent | More fix (diff) | |
| download | iro-sass-f0f84513f8efe533b6ee670a6f1a0c074387b2ec.tar.gz iro-sass-f0f84513f8efe533b6ee670a6f1a0c074387b2ec.tar.bz2 iro-sass-f0f84513f8efe533b6ee670a6f1a0c074387b2ec.zip | |
Make use of SASS modules
Diffstat (limited to 'test/bem/_block.scss')
| -rw-r--r-- | test/bem/_block.scss | 139 |
1 files changed, 73 insertions, 66 deletions
diff --git a/test/bem/_block.scss b/test/bem/_block.scss index fb3a545..e883567 100644 --- a/test/bem/_block.scss +++ b/test/bem/_block.scss | |||
| @@ -1,5 +1,6 @@ | |||
| 1 | // sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations | 1 | // sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations |
| 2 | 2 | ||
| 3 | @use 'sass:map'; | ||
| 3 | @use 'true' as *; | 4 | @use 'true' as *; |
| 4 | @use '../../src/bem'; | 5 | @use '../../src/bem'; |
| 5 | 6 | ||
| @@ -12,77 +13,83 @@ | |||
| 12 | // | 13 | // |
| 13 | 14 | ||
| 14 | @include it('block') { | 15 | @include it('block') { |
| 15 | @include assert('without namespace') { /// 1 /// | 16 | @include assert('without namespace') { /// 1 /// |
| 16 | @include output(false) { | 17 | @include output(false) { |
| 17 | @include bem.block('something') { | 18 | @include bem.block('something') { |
| 18 | font-size: 1em; | 19 | font-size: 1em; |
| 19 | } | 20 | } |
| 20 | } | 21 | } |
| 21 | 22 | ||
| 22 | @include expect(false) { | 23 | @include expect(false) { |
| 23 | .something { | 24 | .something { |
| 24 | font-size: 1em; | 25 | font-size: 1em; |
| 25 | } | 26 | } |
| 26 | } | 27 | } |
| 27 | } | 28 | } |
| 28 | 29 | ||
| 29 | @each $ns in map-keys(bem.$namespaces) { | 30 | @each $ns in map.keys(bem.$namespaces) { |
| 30 | @include assert('with namespace "#{$ns}"') { /// 2 /// | 31 | @include assert('with namespace "#{$ns}"') { /// 2 /// |
| 31 | @include output(false) { | 32 | @include output(false) { |
| 32 | @include bem.block('something', $ns) { | 33 | @include bem.block('something', $ns) { |
| 33 | font-size: 1em; | 34 | font-size: 1em; |
| 34 | } | 35 | } |
| 35 | } | 36 | } |
| 36 | 37 | ||
| 37 | @include expect(false) { | 38 | @include expect(false) { |
| 38 | @if $ns != 'theme' { | 39 | @layer #{$ns} { |
| 39 | .#{map-get(bem.$namespaces, $ns)}-something { | 40 | @if $ns != 'theme' { |
| 40 | font-size: 1em; | 41 | .#{map-get(bem.$namespaces, $ns)}-something { |
| 41 | } | 42 | font-size: 1em; |
| 42 | } @else { | 43 | } |
| 43 | .t-something, | 44 | } @else { |
| 44 | [class*=' t-'] .t-something, | 45 | .t-something, |
| 45 | [class^='t-'] .t-something { | 46 | [class*=' t-'] .t-something, |
| 46 | font-size: 1em; | 47 | [class^='t-'] .t-something { |
| 47 | } | 48 | font-size: 1em; |
| 48 | } | 49 | } |
| 49 | } | 50 | } |
| 50 | } | 51 | } |
| 51 | } | 52 | } |
| 53 | } | ||
| 54 | } | ||
| 52 | 55 | ||
| 53 | @include assert('nested') { /// 3 /// | 56 | @include assert('nested') { /// 3 /// |
| 54 | @include output(false) { | 57 | @include output(false) { |
| 55 | @include bem.theme('theme') { | 58 | @include bem.theme('theme') { |
| 56 | @include bem.theme('subtheme') { | 59 | @include bem.theme('subtheme') { |
| 57 | @include bem.block('something') { | 60 | @include bem.block('something') { |
| 58 | font-size: 2em; | 61 | font-size: 2em; |
| 59 | } | 62 | } |
| 60 | } | 63 | } |
| 61 | } | 64 | } |
| 62 | } | 65 | } |
| 63 | 66 | ||
| 64 | @include expect(false) { | 67 | @include expect(false) { |
| 65 | .t-theme .t-subtheme .something, | 68 | @layer theme { |
| 66 | [class*=' t-'] .t-theme .t-subtheme .something, | 69 | @layer theme { |
| 67 | [class^='t-'] .t-theme .t-subtheme .something { | 70 | .t-theme .t-subtheme .something, |
| 68 | font-size: 2em; | 71 | [class*=' t-'] .t-theme .t-subtheme .something, |
| 69 | } | 72 | [class^='t-'] .t-theme .t-subtheme .something { |
| 70 | } | 73 | font-size: 2em; |
| 71 | } | 74 | } |
| 75 | } | ||
| 76 | } | ||
| 77 | } | ||
| 78 | } | ||
| 72 | 79 | ||
| 73 | @include assert('within selector') { /// 4 /// | 80 | @include assert('within selector') { /// 4 /// |
| 74 | @include output(false) { | 81 | @include output(false) { |
| 75 | .sel { | 82 | .sel { |
| 76 | @include bem.block('something') { | 83 | @include bem.block('something') { |
| 77 | font-size: 2em; | 84 | font-size: 2em; |
| 78 | } | 85 | } |
| 79 | } | 86 | } |
| 80 | } | 87 | } |
| 81 | 88 | ||
| 82 | @include expect(false) { | 89 | @include expect(false) { |
| 83 | .sel .something { | 90 | .sel .something { |
| 84 | font-size: 2em; | 91 | font-size: 2em; |
| 85 | } | 92 | } |
| 86 | } | 93 | } |
| 87 | } | 94 | } |
| 88 | } | 95 | } |