Easier BEM Modifiers with Sass

Sometimes you have very ugly Modifier Chains on a Element, like this:

<a href="#" class="button button--red button--big button--round button--secondary">Button</a>

Is not very sexy and harder to maintain. But what is when you can write this?

<a href="#" class="button--red--big--round--secondary">Button</a>

We don't need an @extend but we use a Base class, the additional 'class-names' would extend the Base Class.

// Setup the Root Element for the following chained Modifers
// 
// @param {string}  $name - The selector name
// 
// @example
//  @include chainroot('.text') {
//    content: hello;
//  }
@mixin chainroot($name) {

  $r: str-slice($name,2,str-length($name));

  @at-root {
    #{$name}, [class^="#{$r}"] {
      @content;
    }
  }
}

// Chain the Modifiers
//
// @param {string}   $name - The selector name
// @param {string}   $parent - Selector of the parent Element
//
// @example
//  @include chain(bright, '.test') {
//    color: #fff;
//  }
@mixin chain($name,$parent) {

  $par: str-slice($parent,2,str-length($parent));

  @at-root {
    [class^="#{$par}"][class*="--#{$name}"] {
      @content;
    }
  }
}

Practical Example : http://sassmeister.com/gist/52b2dd9e0fe8a1ccab8d