〒 Sassy Beam
A Sass mixin to deal with a “BEM-like” notation and a simplified HTML markup
Beam (or sassy-beam) allows the use of a BEM-like notation but with a lighter HTML markup.
It is a combo based on BEM, Nicolas Gallagher's thoughs and Harry Roberts's adaptations … while adding my personal touch!
The Sassy Beam goals
-
Using a BEM method like
.block__element--modifier
-
Keeping a light HTML markup!
<div class="block block--mod1 block--mod2 block--mod3">
becomes:
<div class="block--mod1--mod2--mod3">
-
Maintaining the integrity of class names (no dynamic concatenation [
#{$block}__element
] nor nesting [&__element
]) -
Allowing nesting for readability … or not!
Installation
via npm
npm install sassy-beam
Usage
.html
.scss
;
.css (output)
[[
Extra
Feel free to improve, comment, share, …