〒 Sassy Beam

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

Beam (or sassy-beam) allows the use of a BEM-like notation but with a lighter HTML markup.

It is a combo based on BEM, Nicolas Gallagher's thoughs and Harry Roberts's adaptations … while adding my personal touch!

The Sassy Beam goals

Using a BEM method like .block__element--modifier

Keeping a light HTML markup!

 <div class="block block--mod1 block--mod2 block--mod3">

becomes:

 <div class="block--mod1--mod2--mod3">

Maintaining the integrity of class names (no dynamic concatenation [#{$block}__element] nor nesting [&__element])
Allowing nesting for readability … or not!

Installation

via npm

npm install sassy-beam

Usage

.html

<div class="foo">
  <div class="foo__baz"></div>
  <div class="foo__baz--qux--quux"></div>
</div>
<div class="foo--bar"></div>

.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)

.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

Feel free to improve, comment, share, …

General

functions

get-base

@function get-base($str) { ... }

View source

Description

Get block or block__element segment

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$str`	selector name with modifier(s)	`String`	— none

Returns

String —

*-- part

Used by

[function] get-modifiers
[function] parse

Author

Thierry Michel

get-rest

@function get-rest($str) { ... }

View source

Description

Get everything after block|block__element--*

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$str`	selector name with modifier(s)	`String`	— none

Returns

String —

-* part

Used by

[function] get-modifiers
[function] parse

Author

Thierry Michel

has-modifiers

@function has-modifiers($str) { ... }

View source

Description

Check for segment --modifier(--…)

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$str`	block\|block__element--modifier(--…)	`String`	— none

Returns

Number or Null —

index or null if no occurrence of '--'

Used by

[function] get-modifiers
[function] parse

Author

Thierry Michel

get-modifiers

@function get-modifiers($str, $modifiers: ()) { ... }

View source

Description

Get modifiers from modifier or modifiers--…

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$str`	modifier(--…)	`String`	— none
`$modifiers`	modifier list to be "merged"	`List`	`()`

Returns

List —

list of modifiers

Requires

[function] has-modifiers
[function] get-base
[function] get-rest

Used by

[function] parse

Author

Thierry Michel

parse

@function parse($str) { ... }

View source

Description

Parse a CSS selector "string" (className without ".")

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$str`	block\|block__element--modifier(--…)	`String`	— none

Returns

Map —

map containing "base" property and optional "modifiers" property

Requires

[function] has-modifiers
[function] get-base
[function] get-modifiers
[function] get-rest

Used by

[mixin] beam

Author

Thierry Michel

mixins

beam

@mixin beam($str) { ... }

View source

Description

BEAM magic mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$str`	BEM-like selector name	`String`	— none

Content

This mixin allows extra content to be passed (through the @content directive).

Example

beam('block') { … }
// .block, [class*='block--'] { … }

beam('block__el') { … }
// .block__el, [class*='block__el--'] { … }

beam('block--mod') { … }
// [class*='block--'][class*='--mod'] { … }

beam('block--mod1--mod2') { … }
// [class*='block--'][class*='--mod1'][class*='--mod2'] { … }

Output

Magic CSS ;)

Requires

[function] parse

Author

Thierry Michel