sass-bem-mixins

    1.1.7 • Public • Published

    sass-bem-mixins

    npm version

    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

    Install

    npm i sass-bem-mixins

    DownloadsWeekly Downloads

    22

    Version

    1.1.7

    License

    MIT

    Unpacked Size

    5.26 kB

    Total Files

    4

    Last publish

    Collaborators

    • torch2424