bembem

0.0.4 • Public • Published

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 = require('bembem');
 
module.exports = {
    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: [bembem.includePaths]
                    }
                }]
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                options: {
                    root: bembem.includePaths
                }
            }
        ]
    }
}

Gulp.js

gulpfile.js

const bembem = require('bembem');
 
// styles
gulp.task('styles', () => {
    gulp.src('./src/**/*.scss')
        .pipe($.sass({
            includePaths: ['./src', bembem.includePaths] // for absolute includes
        }).on('error', $.sass.logError))
        .pipe(gulp.dest(pathDist));
});
 
// views
gulp.task('views', () => {
    gulp.src(['!./src/**/_*.pug', './src/**/*.pug'])
        .pipe($.pug({
            basedir: bembem.includePaths // for absolute includes
        }))
        .pipe(gulp.dest(pathDist));
});

Then include mixins into your Sass styles and Pug views:

component.styles.scss

@import "bembem"; // include bembem mixins 
// Prefix will be add in ANY class name. This is NOT required 
@include prefix("item") {
    @include block("menu") {
        float: left;
        // This modifier only works for the Block "menu" 
        @include modifier("right") {
            float: right;
        }
        // The elements are included inside of a Block to have a context 
        @include element("item") {
            float: left;
        }
        @include element("button") {
            display: block;
            padding: 10px;
            color: black;
            &:hover {
                background-color: black;
                color: white;
            }
            // This is a modifier of the element "button" 
            @include modifier("active") {
                background-color: red;
            }
        }
    }
}

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


Credits

Readme

Keywords

Package Sidebar

Install

npm i bembem

Weekly Downloads

1

Version

0.0.4

License

ISC

Last publish

Collaborators

  • ccabreraruiz