❤
npm
Sign UpSign In

pug-bemify

1.1.0 • Public • Published

pug-bemify

A plugin that adds BEM shortcuts to pug

Installation

run npm i pug-bemify

Setup

var pugBEMify = require('pug-bemify');
 
pug.render(somePugString, {
  plugins : [pugBEMify()]
});

Example Usage

.block.-some-modifier
    ._the-child-el
        span.the-grandchild.-with-content Inside

renders:

<div class="block block--some-modifier">
  <div class="block__the-child-el"><span class="the-grandchild the-grandchild--with-content">Inside</span></div>
</div>

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:

.block.block--some-modifier {
  color: #00f;
}
.block.block--some-modifier .block__the-child-el {
  color: #00f;
}
.block .block__the-child-el {
  color: #f00;
}

hint: the / character in /__ or /-- is replaced with the parent block (in this case .block)

Readme

Keywords

Package Sidebar

Install

npm i pug-bemify

Repository

github.com/webleedev/pug-bemify

Homepage

github.com/webleedev/pug-bemify#readme

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

9.23 kB

Total Files

8

Last publish

Collaborators

  • khalidhoffman
  • webleedev
Try on RunKit
Report malware