Sass easy BEM •

Not just another mixins project with only, @include element('name') and the same for blocks and modifiers.

Did you know http://getbem.com/? Well, this toolbox will help you strictly follow the rules the easiest way you'll see.

Just check the examples:

Examples

Let's start with a container containing a button:

@include block('my-container') {
  @include element('my-button') {
    color: red;
  }
}

Gives:

.my-container__my-button {
  color: red;
}

Ok, nothing particular. So now, I wan't to add a modifier blue to my button.

@include block('my-container') {
  @include element('my-button') {
    color: red;
    @include modifier('blue') {
      color: blue;
    }
  }
}

Gives:

.my-container__my-button {
  color: red;
}
.my-container__my-button.my-container__my-button--blue {
  color: blue;
}

Yep, this is striclty the rule of http://getbem.com/.

Still not impressed? Ok.

I want… A cyan button if my button get the blue AND green modifiers. But also ONLY if my container have a allow-color-mixes modifier.

Nothing more simple. Just do:

@include block('my-container') {
  @include modifier('allow-color-mixes') {
    @include element('my-button') {
      @include modifier('blue') {
        @include modifier('green') {
          color: cyan;
        }
      }
    }
  }
}

Gives:

.my-container.my-container--allow-color-mixes .my-container__my-button.my-container__my-button--blue.my-container__my-button--green {
  color: cyan;
}

Yep, it works!

And you know what? It is tested!