From e71acd8415b7e5e82457fcf4a113471af5934c35 Mon Sep 17 00:00:00 2001 From: xymopen Date: Wed, 20 Nov 2019 10:39:10 +0800 Subject: [PATCH] [refactor]: Move nesting to bem-extend() --- src/mixins/function.scss | 16 ++++---- src/mixins/mixins.scss | 80 ++++++++++++++++++---------------------- 2 files changed, 43 insertions(+), 53 deletions(-) diff --git a/src/mixins/function.scss b/src/mixins/function.scss index e3c7b177..5d751b5e 100644 --- a/src/mixins/function.scss +++ b/src/mixins/function.scss @@ -6,7 +6,7 @@ /// See [Combinators](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators "CSS selectors") $_selector-combinators: ("+", "~", ">", "||"); -@function bem-extend($selectors, $extendee, $extender) { +@function bem-extend($selectors, $extendees, $extender) { $returns: (); @if null == $selectors { @@ -16,15 +16,13 @@ $_selector-combinators: ("+", "~", ">", "||"); @each $selector in $selectors { $len: length($selector); - @if nth($selector, $len) == $extendee { - @if $len >= 2 { - @if index($_selector-combinators, nth($selector, $len - 1)) == null { - $returns: append($returns, set-nth($selector, $len, $extender), "comma"); - } @else { - $returns: append($returns, append($selector, $extender), "comma"); - } - } @else { + @if index($extendees, nth($selector, $len)) != null { + @if $len < 2 { $returns: append($returns, ($extender), "comma"); + } @else if index($_selector-combinators, nth($selector, $len - 1)) == null { + $returns: append($returns, set-nth($selector, $len, $extender), "comma"); + } @else { + $returns: append($returns, append($selector, $extender), "comma"); } } @else { $returns: append($returns, append($selector, $extender), "comma"); diff --git a/src/mixins/mixins.scss b/src/mixins/mixins.scss index 8ac9d450..2e1bc8dc 100644 --- a/src/mixins/mixins.scss +++ b/src/mixins/mixins.scss @@ -83,42 +83,34 @@ $_BEM: (null, null, null); @mixin e($elements) { $block: nth($_BEM, 1); + $old-elements: nth($_BEM, 2); @if null == $block { @error "Base-level rules cannot contain an element mixin"; } @else { - $selects: &; - $old-elems: nth($_BEM, 2); - - @if (null != $old-elems) { - $selects: (); - - @each $old-select in & { - @each $old-element in $old-elems { - $old-bem: ".#{$namespace}-#{$block}#{$element-separator}#{$old-element}"; - $old-len: length($old-select); - - @if nth($old-select, $old-len) == $old-bem { - $selects: append($selects, set-nth($old-select, $old-len, ".#{$namespace}-#{$block}"), "comma", ); - } @else { - $selects: append($selects, $old-select, "comma", ); - } - } - } - } - $lastBEM: $_BEM; $_BEM: ($block, $elements, null) !global; - $parent: ".#{$namespace}-#{$block}"; + $parents: (); + + @if (null == $old-elements) { + $parents: append($parents, ".#{$namespace}-#{$block}"); + } @else { + @each $element in $old-elements { + $parents: append($parents, ".#{$namespace}-#{$block}#{$element-separator}#{$element}"); + } + } + $current: (); @each $element in $elements { - $current: append( - $current, - bem-extend($selects, $parent, "#{$parent}#{$element-separator}#{$element}"), - "comma", - ); + @each $parent in $parents { + $current: append( + $current, + bem-extend(&, $parent, ".#{$namespace}-#{$block}#{$element-separator}#{$element}"), + "comma", + ); + } } @at-root { @@ -133,42 +125,42 @@ $_BEM: (null, null, null); @mixin m($modifiers) { $block: nth($_BEM, 1); + $elements: nth($_BEM, 2); + $old-modifiers: nth($_BEM, 3); @if null == $block { @error "Base-level rules cannot contain a modifier mixin"; - } @else if null != nth($_BEM, 3) { + } @else if null != $old-modifiers { @error "Modifier-level rules cannot contain another modifier mixin"; } @else { - $elements: nth($_BEM, 2); - - @if (null == $elements) { - $elements: (null); - } - $lastBEM: $_BEM; $_BEM: ($block, $elements, $modifiers) !global; - @each $element in $elements { - $parent: ".#{$namespace}-#{$block}"; + $parents: (); - @if (null != $element) { - $parent: "#{$parent}#{$element-separator}#{$element}"; + @if (null == $elements) { + $parents: append($parents, ".#{$namespace}-#{$block}"); + } @else { + @each $element in $elements { + $parents: append($parents, ".#{$namespace}-#{$block}#{$element-separator}#{$element}"); } + } - $current: (); + $current: (); - @each $modifier in $modifiers { + @each $modifier in $modifiers { + @each $parent in $parents { $current: append( $current, - bem-extend(&, $parent, "#{$parent}#{$modifier-separator}#{$modifier}"), + bem-extend(&, $parents, "#{$parent}#{$modifier-separator}#{$modifier}"), "comma", ); } + } - @at-root { - #{$current} { - @content; - } + @at-root { + #{$current} { + @content; } }