BEM Helper (SCSS, SASS, LESS, Stylus)

bem.less

// Mixins
.has(@element; @content) {
  &__@{element} {
    @content();
  }
}

.variant(@modifier; @content) {
  &--@{modifier} {
    @content();
  }
}

// Example
.Alert {
  padding: 20px;
  position: relative;
  width: 500px;
  
  .variant(danger; {
    background-color: #c00;
    color: #300;
  });

  .has(close-button; {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
    
    .variant(danger; {
      color: #c00;
    });
  });
}

bem.sass

// Mixins
=has($element)
  @at-root #{&}__#{$element}
    @content

=variant($modifier)
  @at-root #{&}--#{$modifier}
    @content

// Example
.Alert 
  padding: 20px
  position: relative
  width: 500px
  
  +variant(danger) 
    background-color: #c00
    color: #300
  

  +has(close-button) 
    display: inline-block
    position: absolute
    right: 20px
    top: 20px
    
    +variant(danger) 
      color: #c00;

bem.scss

// Mixins
@mixin has($element) {
  &__#{$element} {
    @content;
  }
}

@mixin variant($modifier) {
  &--#{$modifier} {
    @content;
  }
}

// Example
.Alert {
  padding: 20px;
  position: relative;
  width: 500px;
  
  @include variant(danger) {
    background-color: #c00;
    color: #300;
  }

  @include has(close-button) {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
    
    @include variant(danger) {
      color: #c00;
    }
  }
}

bem.styl

// Mixins
has($element)
  /&__{$element}
    {block}

variant($modifier)
  /&--{$modifier}
    {block}

// Example
.Alert 
  padding: 20px
  position: relative
  width: 500px
  
  +variant(danger)
    background-color: #c00
    color: #300
  
  +has(close-button)
    display: inline-block
    position: absolute
    right: 20px
    top: 20px
    
    +has(danger)
      color: #c00