Sass: BEM Mixins

_bem.scss

$bem-element-separator: '__' !default;
$bem-modifier-separator: '--' !default;

// BEM: Block (New)
@mixin new($name, $description) {
    /**
     * #{$name}
     * #{$description}
     */
    .#{$name} {
        @content;
    }
}

// BEM: Element (Has)
@mixin has($name) {
    @at-root {
      $selector: nth(&, 1);
      $parent: nth($selector, length($selector));

      @if str-index($parent, $bem-element-separator) {
        @error '#{$parent} is already an element';
      }

      #{&}#{$bem-element-separator}#{$name} {
          @content;
      }
    }
}

// BEM: Modifier (When)
@mixin when($name) {
    @at-root {
        $selector: nth(&, 1);
        $parent: nth($selector, length($selector));

        @if str-index($parent, $bem-modifier-separator) {
          @error '#{$parent} is already modified';
        }

        #{$parent}#{$bem-modifier-separator}#{$name} {
            @extend #{$parent};
        }

        // Add the modifier and rules
        #{&}#{$bem-modifier-separator}#{$name} {
            @content;
        }
    }
}


// Example

@include new('widget', 'B42 - Carousel') {
    background: #eee;
 
    @include has('title') {
        color: #444;
        font-size: 1.5em;
        font-weight: 600;
 
        @include when('big') {
            font-size: 3em;
        }
    }
 
    @include has('body') {
        color: #888;
    }
}

example.css

/**
 * .widget
 * B42 - Carousel
 */
.widget {
  background: #eee;
}
.widget__title, .widget__title--big {
  color: #444;
  font-size: 1.5em;
  font-weight: 600;
}
.widget__title--big {
  font-size: 3em;
}
.widget__body {
  color: #888;
}