bem

variablebem--sep-elempublicview codeopen_in_new

The Element separator used. Default '__'.

Example

Change the element separator from '__' to '-'

$bem--sep-elem: '-';

@include b(block) {
   @include e(element) {
     background: blue;
   }
}

// Generated CSS
.block-element { background: blue; }

variablebem--sep-modpublicview codeopen_in_new

The Modifier separator used. Default '--'.

Example

Change the modifier separator from '--' to '---'

$bem--sep-mod: '---';

@include b(block) {
   @include m(modifier) {
     background: red;
   }
}

// Generated CSS
.block---modifier { background: red; }

variablebem--sep-mod-valpublicview codeopen_in_new

The Modifier Value separator used. Default '-'.

Example

Change the modifier value separator from '-' to '_'

$bem--sep-mod-val: '_';

@include b(block) {
   @include m(modifier, value) {
     background: red;
   }
}

// Generated CSS
.block--modifier_value { background: red; }

functionbem-selectorpublicview codeopen_in_new

Generates a full BEM selector.

Example

Include a block

$selector: bem-selector(block); // returns .block

Example

Include a block and an element

$selector: bem-selector(block, $elem: elem); // returns .block__elem

Example

Include block, element, and element modifier

$selector: bem-selector(block, $elem: (elem, mod)); // returns .block__elem--mod

Example

Include block and block modifier

$selector: bem-selector(block, $mod: mod); // returns .block--mod

Example

Include block and multiple block modifiers

$selector: bem-selector(block, $mods: (mod-1, mod-2)); // returns .block--mod-1.block--mod-2

Example

Include block modifier followed by block sub-element

$selector: bem-selector(block, $m: mod, $e: elem); // returns .block--mod .block__elem

Parameters

Name	Type	Default	Description
$block*	String	-	A string block name. Required.
$elem	String\|List	null	A sub-element name. If `$mod` is not present, it is joined with $block. If $mod is present, it is nested under `$block--$mod`.
$mod	String\|Map	null	A block modifier.
$mods	List	null	A list of block modifiers.

functionelempublicview codeopen_in_new

Returns a BEM element selector string. If a modifier is provided, it will be appended to the element selector.

Example

$selector: elem('button', 'icon'); // returns '.button__icon'
$selector: elem('button', 'icon', 'big'); // returns '.button__icon--big'

Parameters

Name	Type	Default	Description
$block*	String	-	The block name.
$elem*	String	-	The element name.
$mod	String	null	The modifier name. Optional.

functionmodpublicview codeopen_in_new

Returns a BEM modifier selector string for a block.

Example

$selector: mod('button', 'primary'); // returns '.button--primary'
$selector: mod('card', 'outlined'); // returns '.card--outlined'

Parameters

Name	Type	Default	Description
$block*	String	-	The block name.
$mod*	String	-	The modifier name.

mixinbem-blockpublicview codeopen_in_new

Simply unrolls into a class-selector. The main purpose of using this mixin is to clearly denote the start of a BEM block.

Example

Include a block

@include bem-block(block) {
   background: green;
}

// Output
.block { background: green; }

Parameters

Name	Type	Default	Description
$block*	String	-	The block name.

Aliases

mixinbem-elempublicview codeopen_in_new

Unrolls into a proper BEM element selector, depending on the context. Inside just a block, yields a root-level `.block__elem`. Inside a mod or pseudo-selector, yields a nested `.block--mod .block__elem`. If $mod is included, it is appended to the block selector. Multiple $mods are not supported.

Example

@include bem-block(block) {
   @include bem-elem(element) {
     background: blue;
   }
}
// Return
.block__element { background: blue; }

Parameters

Name	Type	Default	Description
$elem*	String	-	The sub-element name.
$m*	String	-	The modifier name.
$mod*	String	-	An alias of `$m`.

Aliases

mixinbem-modpublicview codeopen_in_new

Generates selectors for multiple block modifiers with optional exclusions

Example

@include bem-block(card) {
  @include bem-mods(large, primary, (not: outline)) {
    // Applies to .card--large, .card--primary
    // but not when .card--outline is present
  }
}

Parameters

Name	Type	Default	Description
$mods*	List	-	List of modifier names
$not*	Boolean	-	Modifier(s) to exclude with :not()

Aliases

mixinbem-modspublicview codeopen_in_new

Unrolls into a block--modifier.[block--modifier...] .block__el This mixin is useful when we want to apply classes to a block, or block element when two or more modifiers are applied in tandem

Example

@include bem-block(block) {
   @include bem-mods(error, warn) {
     position: absolute;
   }
}
// Return
.block--error,
.block--warn {
    position: absolute;
 }

Parameters

Name	Type	Default	Description
$mods*	List	-	A list of modifiers

Aliases

mixinbempublicview codeopen_in_new

Generates a full BEM rule.

Example

Include a block

@include bem(block) {
  background: blue;
};

// Output
.block {
  background: blue;
}

Example

Include a block and an element

 @include bem(block, $elem: elem) {
   background: blue;
 }

// Output
 .block__elem {
   background: blue;
 }

Example

Include block, element, and element modifier

@include bem(block, $elem: (elem, mod)) {
  background: blue;
}

// Output
.block__elem--mod {
  background: blue;
}

Example

Include block and block modifier

@include bem(block, $mod: mod) {
  background: blue;
}

// Output
.block--mod {
  background: blue;
}

Example

Include block with multiple modifiers

@include bem(block, $mods: (mod-1, mod-2)) {
   background: blue;
 }

 // Output
 .block--mod-1.block--mod-2 {
   background: blue;
 }

Example

Include block modifier followed by block sub-element

@include bem(block, $m:mod, $e:elem) {
  background: blue;
}

// Output
.block--mod .block__elem {
  background: blue;
}

Parameters

Name	Type	Default	Description
$block*	String	-	A string block name. Required.
$elem	String\|List	null	A sub-element name. If `$mod` is not present, it is joined with $block. If $mod is present, it is nested under `$block--$mod`.
$mod	String\|Map	null	A block modifier.
$mods	String\|Map	null	A list of block modifiers.