$bemElementSeparator: '__' $bemModifierSeparator: '--' @function b-class($block) @return ".#{$block}" @function e-class($block, $element) @return ".#{$block+$bemElementSeparator+$element}" @function m-class($selector, $modifier) @return "#{$selector+$bemModifierSeparator+$modifier}" @function containsModifier($selector) $selector: inspect($selector) @return if(str-index($selector, $bemModifierSeparator), true, false) @function containsPseudo($selector) $selector: inspect($selector) @return if(str-index($selector, ':'), true, false) @function containsElement($selector) $selector: inspect($selector) @return if(str-index($selector, $bemElementSeparator), true, false) @function getBlock($selector) $selector: inspect($selector) $elementStart: str-index($selector, $bemElementSeparator) $modifierStart: str-index($selector, $bemModifierSeparator) $pseudoStart: str-index($selector, ':') $start: if($elementStart, $elementStart - 1, if($modifierStart, $modifierStart - 1, if($pseudoStart, $pseudoStart - 1, -1))) @return str-slice($selector, 2, $start) //without dot =b($blocks...) $selectors: () @each $block in $blocks $selectors: append($selectors, #{b-class($block)}, 'comma') #{$selectors} @content =e($elements...) $selectors: () $parentSelector: & @each $currentSelector in $parentSelector $block: getBlock($currentSelector) @each $element in $elements @if containsModifier($currentSelector) or containsPseudo($currentSelector) $selectors: append($selectors, #{$currentSelector e-class($block, $element)}, 'comma') @else $selectors: append($selectors, e-class($block, $element), 'comma') @at-root #{$selectors} @content =m($modifiers...) $selectors: () $parentSelector: & @each $currentSelector in $parentSelector @each $modifier in $modifiers $selectors: append($selectors, m-class($currentSelector, $modifier), 'comma') @at-root #{$selectors} @content =ms($modifiers...) $selectors: null @each $modifier in $modifiers $selectors: $selectors#{m-class(&, $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) $block: getBlock(nth(&, 1)) @return image-url("#{$level}/#{$block}/images/#{$image}")