BEM tool for markup minification, using mixins.
npm install bem-pug-mixins__Bemify your markup!__
Inspired by bemto <3
``
npm i -S bem-pug-mixins
``
_Webpack_
`
include ~bem-pug-mixins/mixins
_Manually_
You have to provide require function manually. It's easy, I'll show you with simple nodeJS script:
`
'use strict'
const pug = require('pug')
const pugml =
-
const _ = require('lodash')
//- Lets print
1,2,3
!const html = pug.render(pugml, {
require: require
})
console.log(html)
`
In the example above we provided require function inside PugJS's locals object. Look at the (official description)[https://pugjs.org/api/reference.html#pugrendersource-options-callback].
Now provide relative path to the installed library:
`
include relative/path/to/node_modules/bem-pug-mixins/mixins
__Important!__
From PugJS official docs (common mistakes section):
> Note also that only named blocks and mixin definitions can appear at the top (unindented) level of an extending template. This is important because the parent templates define the overall page structure, and extending child templates only append, prepend, or replace specific blocks of markup and logic. If you created a child template and tried to add content outside of a block, Pug would have no way of knowing where to put it in the final page.
_So you MUST include this library in the beginning of your top-level layout to avoid compilation errors!_
Bem factory instance is already preconfigured with standard BEM prefixes (__ for elements and '--' for modifiers) and you may start your work right after the installation procedure!
If you prefer another element/modifier separators, you can re-create bem instance:
`
- bem = new BEM({ separators: { element: '-', modifier: '--' } })
Place this code right after library inclusion.
`
// 1st uppercased class is always treated like a "tag class"!
+b.BODY.Page // ->
// Easily create prefixed BEM elements!
+e.HEADER.header // ->
// "div" is the default html tag for each BEM entity.
+b.TopNav // ->
+e.logo // ->
a(href="/")
// Define as many modifiers as necessary!
// style A (straightforward syntax):
+b.Logo_special_small // -> .Logo.Logo--special.Logo--small
// style B (more flexible, awesome for nested mixins):
+b.Logo._special._small // All underscored classes are modifier classes!
// Provide as many additional classes as necessary!
+e.menu.Menu.myClass // ->