pug-bem
A plugin that adds BEM shortcuts to Pug
New! v1.2.0
Now you can specify your own prefixes for blocks in the b property:
var bem = ; // block prefixbemb = 'my-';
or
// default 'b-'bemb = true;
The prefix name can consist of letters, numbers, underscores, and hyphens. After that, only classes that begin with your prefix will be considered when parsing the BEM blocks. Classes of blocks without a prefix will be skipped at any depth of nesting elements. This will solve the problem associated with the use of external css-libraries, such as Bootstrap, with a large depth of nesting elements. For example:
no prefix:
test.pug
.block .row .col-lg-8.col-xl-4 .row .col-lg-8.col-xl-3 ._elem1 .col-lg-4.col-xl-8 ._elem2
will be compiled to:
<!-- the block is the closest parent element with the class 'col-lg-8' in the file 'test.pug' --> <!-- the block is the closest parent element with the class 'col-lg-4' in the file 'test.pug' -->
user prefix:
gulpfile.js
var bem = ;bemb = true // default 'b-'
test.pug
//- add prefix to block name.b-block .row .col-lg-8.col-xl-4 .row .col-lg-8.col-xl-3 ._elem1 .col-lg-4.col-xl-8 ._elem2
will be compiled to:
<!-- user prefix will not fall into the final html --> <!-- the block is an element with the prefix 'b-' in the file 'test.pug' --> <!-- the block is an element with the prefix 'b-' in the file 'test.pug' -->
another example:
//- when using custom prefixes, they must be added to the name of each BEM block.//- block classes without a prefix are not taken into account in the BEM namespace when compiling!.b-block1 .class1.class2 .class3 ._elem1 .b-block2 ._elem2
will be compiled to:
Install
npm install pug pug-bem --save-dev
Setup
var pug = ;var bem = ; // Create object optionsvar options = plugins: bem // Compile a functionvar fn = pug;
Example Usage
Block
.block
.headerform.search-form .header nav.menu
result:
Element
._element
form.search-form input._input button._button Search
result:
Search
Modifier
.-modifier
Boolean
.-boolean
form.search-form.-focused button._button.-disabled Search
result:
Search
Key_Value
.-key_value
form.search-form.-theme_islands button._button.-size_m Search
result:
Search
Mix
.block._element
.header form.search-form._search-form
result:
Example
header.header nav.menu a(href="#")._logo Company .list a._item.-active(href="#") Home a._item(href="#") News a._item(href="#") Gallery a._item(href="#") Partners a._item(href="#") About a._item(href="#") Contacts h1._title Hello, World! .myslider._myslider ._slide Content ._slide.-active Content ._slide Content p._text Good weather
result:
Company Home News Gallery Partners About Contacts Hello, World! Content Content Content Good weather
Options
var bem = ; // element separatorbeme = 'string'; // modifier separatorbemm = 'string';
Example
beme = '**';
form.search-form input._input
result:
bemm = '++';
form.search-form.-focused
result:
License
ISC License
Author
Legostaev Vadim (legostaev.vadim@mail.ru)