Skip to content

Instantly share code, notes, and snippets.

@evenicoulddoit
Created November 16, 2015 14:46
Show Gist options
  • Save evenicoulddoit/f790594f4b7d2cd1b3aa to your computer and use it in GitHub Desktop.
Save evenicoulddoit/f790594f4b7d2cd1b3aa to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
$bem-element-separator: '__';
$bem-modifier-separator: '--';
@function selectorToString($selector) {
$selector: inspect($selector); //cast to string
$selector: str-slice($selector, 2, -2); //remove brackets
@return $selector;
}
@function lastIndex($str, $needle, $from: 0) {
$index: str-index($str, $needle);
@if(not $index) {
@return $from;
}
@else {
$str: str-slice($str, $index + 1);
@return lastIndex($str, $needle, $from + $index);
}
}
@function containsModifier($selector) {
$selector: selectorToString($selector);
@if(str-index($selector, $bem-modifier-separator)) {
@return true;
}
@else {
@return false;
}
}
@function lastElement($str) {
$last-index: lastIndex($str, " ");
$str: if($last-index, str-slice($str, $last-index + 1), $str);
@return $str;
}
@function getBlock($selector) {
$selector: selectorToString($selector);
$element: lastElement($selector);
@debug($element);
$modifierStart: str-index($element, $bem-modifier-separator) - 1;
@return str-slice($element, 0, $modifierStart);
}
@mixin block($block) {
.#{$block} {
@content;
}
}
@mixin element($element) {
$selector: &;
@if(containsModifier($selector)) {
$block: getBlock($selector);
@debug($block);
@at-root {
#{$selector} {
#{$block+$bem-element-separator+$element} {
@content;
}
}
}
}
@else {
@at-root {
#{$selector+$bem-element-separator+$element} {
@content;
}
}
}
}
@mixin modifier($modifier) {
@at-root {
#{&}#{$bem-modifier-separator+$modifier} {
@content;
}
}
}
@include block(test) {
background: red;
@include element(element){
font-size: 14px;
@include modifier(big) {
font-size: 18px;
}
}
@include modifier(modifier) {
color: blue;
@include element(subelement) {
background: gray;
}
}
@include block(nested-block) {
@include modifier(modifier) {
@include element(element) {
color: blue;
}
}
}
}
.test {
background: red;
}
.test .test__element {
font-size: 14px;
}
.test .test__element .test .test__element--big {
font-size: 18px;
}
.test .test--modifier {
color: blue;
}
.test .test--modifier .test .test--modifier .test__subelement {
background: gray;
}
.test .nested-block .test .nested-block--modifier .test .nested-block .test .nested-block--modifier .nested-block__element {
color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment