BEM! BEM!
Install
BemBem
npm install bembem --save-dev
Usage
In order to use absolute include paths with Gulp.js you must add the bembem path into both sass (includePaths) and pug (basedir) options:
webpack 2
webpack.config.js
const bembem = ; moduleexports = entry: './app.js' output: filename: './dist/app.bundle.js' devtool: 'source-map' module: rules: test: /\.scss$/ use: loader: "style-loader" // creates style nodes from JS strings loader: "css-loader" // translates CSS into CommonJS loader: "sass-loader" // compiles Sass to CSS options: includePaths: bembemincludePaths test: /\.pug$/ loader: 'pug-loader' options: root: bembemincludePaths
Gulp.js
gulpfile.js
const bembem = ; // stylesgulp; // viewsgulp;
Then include mixins into your Sass styles and Pug views:
component.styles.scss
; // include bembem mixins // Prefix will be add in ANY class name. This is NOT required
component.view.pug
include /bembem // include bembem mixins - var $prefix = 'item-' +bem_scope({prefix: $prefix}) +block.UL.menu +element.LI.item +element.A.button(href="#", title="") Button 1 +element.LI.item +element.A.button._active(href="#", title="") Button 2 +element.LI.item +element.A.button(href="#", title="") Button 3
Resources
- BEM: https://en.bem.info/methodology/key-concepts/
- Jade: http://jade-lang.com/
- Sass: http://sass-lang.com/
- Bemto: https://github.com/kizu/bemto
Credits
- Sass Mixins by Giuliano Kranevitter http://github.com/giulianok
- Pug Mixins based on Bemto https://github.com/kizu/bemto