sass-bem-mixins

Npm Module for some simple BEM mixins for Sass. Heavily inspired by CSS Tricks and Grsmto.

Github Pages Demo. NPM Module Link.

Usage

Install to the project:

npm install --save sass-bem-mixins

Simply import at the top of a sass file to get going:

@import './node_modules/sass-bem-mixins/index.scss';

// Other Sass down here...

Example

Please see the docs folder for a very simple example project that is on the Github Pages.

@import 'node_modules/sass-bem-mixins/index';

@include block('exampleBlock') {
  background-color: blue;
  color: white;

  @include element('exampleElement') {
    background-color: red;

    @include modifier('modified') {
      background-color: green;
    }
  }
}

/*******************
// Would give the output

.exampleBlock {
  background-color: blue;
  color: white;
}

.exampleBlock__exampleElement, .exampleBlock__exampleElement--modified {
  background-color: red;
}

.exampleBlock__exampleElement--modified {
  background-color: green;
}

*******************/

Contributing

Clone the project:

git clone https://github.com/torch2424/sass-bem-mixins.git

Install devDependencies:

npm install

Run the command: npm run build, to continuously see changes to the index.html in the docs folder. Sorry, but no livereload or watch is set up for this (Since it's just a simple little package).

LICENSE

MIT