pug-bemify
A plugin that adds BEM shortcuts to pug
Installation
run npm i pug-bemify
Setup
var pugBEMify = ; pug;
Example Usage
.block.-some-modifier ._the-child-el span.the-grandchild.-with-content Inside
renders:
Inside
Bonus Points
this plugin plays nicely with stylus and stylus-bem-evaluator. Example usage following the pug example may look like this:
.block &/--some-modifier color: blue /__the-child-el color: @color /__the-child-el color: red
which renders:
hint: the /
character in /__
or /--
is replaced with the parent block (in this case .block
)