https://github.com/thierrymichel/sassy-beam

A Sass mixin to deal with a “BEM-like” notation and a simplified HTML markup
https://github.com/thierrymichel/sassy-beam

Last synced: about 2 months ago
JSON representation

A Sass mixin to deal with a “BEM-like” notation and a simplified HTML markup

• Host: GitHub
• URL: https://github.com/thierrymichel/sassy-beam
• Owner: thierrymichel
• License: unlicense
• Created: 2018-09-28T12:56:49.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-26T21:25:39.000Z (about 6 years ago)
• Last Synced: 2024-11-17T18:51:28.493Z (2 months ago)
• Language: JavaScript
• Size: 571 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# 〒 Sassy Beam

> A Sass mixin to deal with a “BEM-like” notation and a simplified HTML markup

![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)

[![NPM version](https://img.shields.io/npm/v/sassy-beam.svg?style=flat-square)](https://www.npmjs.com/package/sassy-beam)

[![License](https://img.shields.io/badge/license-UNLICENSE-green.svg?style=flat-square)](https://github.com/thierrymichel/sassy-beam/blob/master/UNLICENSE)

[![Build Status](https://travis-ci.org/thierrymichel/sassy-beam.svg?branch=master)](https://travis-ci.org/thierrymichel/sassy-beam)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

Beam (or sassy-beam) allows the use of a [BEM](http://bem.info/method/definitions/)-like notation but with a lighter HTML markup.

It is a combo based on BEM, [Nicolas Gallagher's thoughs](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/) and [Harry Roberts's adaptations](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) … while adding my personal touch!

## The Sassy Beam goals

1. Using a BEM method like `.block__element--modifier`

2. __Keeping a light HTML markup!__

    ```

    


    ```

    becomes:

    ```

    


    ```

3. Maintaining the integrity of class names (no dynamic concatenation [`#{$block}__element`] nor nesting [`&__element`])

4. Allowing nesting for readability … or not!


## Installation

### via npm

```sh

npm install sassy-beam

```

## Usage

### .html

```html



  


  






```


### .scss

```scss

@import 'sassy-beam';

@include beam('foo') {

  property: value;

}

@include beam('foo--bar') {

  property: value;

}

@include beam('foo__baz') {

  property: value;

}

@include beam('foo__baz--qux--quux') {

  property: value;

}

```

### .css (output)

```css

.foo, [class*="foo--"] {

  property: value;

}

[class*="foo--"][class*="--bar"] {

  property: value;

}

.foo__baz, [class*="foo__baz--"] {

  property: value;

}

[class*="foo__baz--"][class*="--qux"][class*="--quux"] {

  property: value;

}

```

## Extra

* [Documentation](https://thierrymichel.github.io/sassy-beam/)

---

> **Feel free to improve, comment, share, …**