diff options
Diffstat (limited to 'src/bem/_theme.scss')
| -rw-r--r-- | src/bem/_theme.scss | 57 |
1 files changed, 30 insertions, 27 deletions
diff --git a/src/bem/_theme.scss b/src/bem/_theme.scss index ff1ba49..535cc81 100644 --- a/src/bem/_theme.scss +++ b/src/bem/_theme.scss | |||
| @@ -4,6 +4,9 @@ | |||
| 4 | /// @access public | 4 | /// @access public |
| 5 | //// | 5 | //// |
| 6 | 6 | ||
| 7 | @use 'sass:list'; | ||
| 8 | @use 'sass:map'; | ||
| 9 | @use 'sass:selector'; | ||
| 7 | @use './functions'; | 10 | @use './functions'; |
| 8 | @use './validators'; | 11 | @use './validators'; |
| 9 | @use './vars'; | 12 | @use './vars'; |
| @@ -18,22 +21,22 @@ | |||
| 18 | /// @content | 21 | /// @content |
| 19 | /// | 22 | /// |
| 20 | @mixin at-theme($name, $names...) { | 23 | @mixin at-theme($name, $names...) { |
| 21 | $result: at-theme($name, $names...); | 24 | $result: at-theme($name, $names...); |
| 22 | $selector: nth($result, 1); | 25 | $selector: list.nth($result, 1); |
| 23 | $context: nth($result, 2); | 26 | $context: list.nth($result, 2); |
| 24 | 27 | ||
| 25 | @include validators.validate( | 28 | @include validators.validate( |
| 26 | 'at-theme', | 29 | 'at-theme', |
| 27 | (name: $name, names: $names), | 30 | (name: $name, names: $names), |
| 28 | $selector, | 31 | $selector, |
| 29 | $context | 32 | $context |
| 30 | ); | 33 | ); |
| 31 | 34 | ||
| 32 | @include contexts.push(vars.$context-id, $context...); | 35 | @include contexts.push(vars.$context-id, $context...); |
| 33 | @at-root #{$selector} { | 36 | @at-root #{$selector} { |
| 34 | @content; | 37 | @content; |
| 35 | } | 38 | } |
| 36 | @include contexts.pop(vars.$context-id); | 39 | @include contexts.pop(vars.$context-id); |
| 37 | } | 40 | } |
| 38 | 41 | ||
| 39 | /// | 42 | /// |
| @@ -45,22 +48,22 @@ | |||
| 45 | /// @see {mixin} at-theme | 48 | /// @see {mixin} at-theme |
| 46 | /// | 49 | /// |
| 47 | @function at-theme($name, $names...) { | 50 | @function at-theme($name, $names...) { |
| 48 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); | 51 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); |
| 49 | 52 | ||
| 50 | $parent-context: contexts.get(vars.$context-id, 'block'); | 53 | $parent-context: contexts.get(vars.$context-id, 'block'); |
| 51 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); | 54 | $parent-selector: map.get(list.nth($parent-context, 2), 'selector'); |
| 52 | 55 | ||
| 53 | //@if not functions.selector-suffix-match(&, $parent-selector) { | 56 | //@if not functions.selector-suffix-match(&, $parent-selector) { |
| 54 | // @error 'An at-theme rule must be an immediate child of a block'; | 57 | // @error 'An at-theme rule must be an immediate child of a block'; |
| 55 | //} | 58 | //} |
| 56 | 59 | ||
| 57 | $selector: functions.theme-selector($name, $names...); | 60 | $selector: functions.theme-selector($name, $names...); |
| 58 | $selector: selector-nest($selector, &); | 61 | $selector: selector.nest($selector, &); |
| 59 | 62 | ||
| 60 | $context: 'at-theme', ( | 63 | $context: 'at-theme', ( |
| 61 | 'name': join($name, $names), | 64 | 'name': list.join($name, $names), |
| 62 | 'selector': $selector | 65 | 'selector': $selector |
| 63 | ); | 66 | ); |
| 64 | 67 | ||
| 65 | @return $selector $context; | 68 | @return $selector $context; |
| 66 | } | 69 | } |
