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