We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
BEM-style mixin produces invalid selectors when compiled with libsass 3.2.4, whereas ruby sass produces expected output.
source.sass
@import mixins/bem +b(address) +e(headline) color: #bebebe +m(footer) display: none +m(footer) +e(headline) font-weight: bold
ruby sass:
.address__headline { color: #bebebe; } .address__headline--footer { display: none; } .address--footer .address__headline { font-weight: bold; }
libsass:
.address .address__headline { color: #bebebe; } .address .address__headline .address .address__headline--footer { display: none; } .address .address--footer .address .address--footer address .address__headline { font-weight: bold; }
BEM mixin helper:
// mixin use bem style coding $elementSeparator: "__" $modifierSeparator: "--" @function selectorToString($selector) $selector: inspect($selector) //cast to string $selector: str-slice($selector, 2, -2) //remove bracket @return $selector @function containsModifier($selector) $selector: selectorToString($selector) @if str-index($selector, $modifierSeparator) @return true @else @return false @function getBlock($selector) $selector: selectorToString($selector) @if str-index($selector, $modifierSeparator) $modifierStart: str-index($selector, $modifierSeparator) - 1 @return str-slice($selector, 0, $modifierStart) @else @return $selector =b($block) .#{$block} @content =e($element) $selector: & $block: getBlock($selector) @if containsModifier($selector) @at-root #{$selector} #{$block + $elementSeparator + $element} @content @else @at-root #{$selector + $elementSeparator + $element} @content =m($modifier) @at-root #{&}#{$modifierSeparator + $modifier} @content
The text was updated successfully, but these errors were encountered:
Duplicate #1210
Sorry, something went wrong.
Having the parent ticket marked as fixed, this specific case still does not work on latest beta. Now the output is
.address__headline { color: #bebebe; } .address__headline--footer { display: none; } .address--footer address__headline { font-weight: bold; }
Almost right, but notice the missing dot in the last selector.
()
@chetzof I've reduced this down to the core issue in #1583
No branches or pull requests
BEM-style mixin produces invalid selectors when compiled with libsass 3.2.4, whereas ruby sass produces expected output.
source.sass
ruby sass:
libsass:
BEM mixin helper:
The text was updated successfully, but these errors were encountered: