https://github.com/webleedev/pug-bemify

A plugin for Pug that adds BEM-friendly shortcuts
https://github.com/webleedev/pug-bemify

bem bem-methodology plugin pug

Last synced: 6 days ago
JSON representation

A plugin for Pug that adds BEM-friendly shortcuts

• Host: GitHub
• URL: https://github.com/webleedev/pug-bemify
• Owner: webleedev
• License: mit
• Created: 2017-02-16T13:05:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-14T03:30:18.000Z (over 5 years ago)
• Last Synced: 2024-04-26T07:02:38.263Z (5 months ago)
• Topics: bem, bem-methodology, plugin, pug
• Language: JavaScript
• Size: 8.79 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pug-bemify

A plugin that adds BEM shortcuts to pug

## Installation

run `npm i pug-bemify`

## Setup

```javascript

var pugBEMify = require('pug-bemify');

pug.render(somePugString, {

  plugins : [pugBEMify()]

});

```

## Example Usage

```pug

.block.-some-modifier

    ._the-child-el

        span.the-grandchild.-with-content Inside

```

renders:

```html



  
Inside



```


## Bonus Points

this plugin plays nicely with stylus and [stylus-bem-evaluator](https://github.com/khalidhoffman/stylus-bem-evaluator).

Example usage following the pug example may look like this:

```stylus

.block

  &/--some-modifier

    color: blue 

    /__the-child-el

      color: @color

  /__the-child-el

    color: red

```

which renders:

```css

.block.block--some-modifier {

  color: #00f;

}

.block.block--some-modifier .block__the-child-el {

  color: #00f;

}

.block .block__the-child-el {

  color: #f00;

}

```

hint: the `/` character in `/__` or `/--` is replaced with the parent block (in this case `.block`)