$bemElementSeparator: '__' $bemModifierSeparator: '--' @function b-class($block) @return ".#{$block}" @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, $bemModifierSeparator) @return true @else @return false @function containsPseudo($selector) $selector: selectorToString($selector) @if str-index($selector, ':') @return true @else @return false @function containsElement($selector) $selector: selectorToString($selector) @if str-index($selector, $bemElementSeparator) @return true @else @return false @function getBlock($selector) $selector: selectorToString($selector) $elementStart: str-index($selector, $bemElementSeparator) $modifierStart: str-index($selector, $bemModifierSeparator) $pseudoStart: str-index($selector, ':') $start: if($elementStart, $elementStart - 1, if($modifierStart, $modifierStart - 1, $pseudoStart - 1)) @return str-slice($selector, 0, $start) =b($block) .#{$block} @content =plus_b @at-root $block: & #{$block} + #{$block} @content =hover_b @at-root $block: & #{$block}:hover @content =e($elements...) $selectors: () $currentSelector: & @each $element in $elements @if containsModifier($currentSelector) or containsPseudo($currentSelector) $block: getBlock($currentSelector) $selectors: append($selectors, unquote('#{$currentSelector} #{$block+$bemElementSeparator+$element}'), 'comma') @else $selectors: append($selectors, unquote('#{$currentSelector+$bemElementSeparator+$element}'), 'comma') @at-root #{$selectors} @content =m($modifiers...) $selectors: () @each $modifier in $modifiers $selectors: append($selectors, unquote('#{&}#{$bemModifierSeparator+$modifier}'), 'comma') @at-root #{$selectors} @content =ms($modifiers...) $selectors: null @each $modifier in $modifiers $selectors: $selectors#{&}#{$bemModifierSeparator+$modifier} @at-root #{$selectors} @content =icons-m($modifiers, $width, $height) @for $i from 1 through length($modifiers) +m(nth($modifiers, $i)) background-position: -($i - 1) * $width (0) &:hover background-position: -($i - 1)*$width (-$height) &:active background-position: -($i - 1) * $width (-2 * $height) @function block-image-url($level, $image) $selector: & $selector: selectorToString($selector) $block: if(containsModifier($selector) or containsPseudo($selector) or containsElement($selector), getBlock($selector), selectorToString($selector)) @return image-url("#{$level}/#{$block}/images/#{$image}")