bem

variable bem--sep-elem public view code open_in_new

Example

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

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

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

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

variable bem--sep-mod public view code open_in_new

Example

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

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

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

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

variable bem--sep-mod-val public view code open_in_new

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; }

function bem-selector public view code open_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.

function elem public view code open_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.

function mod public view code open_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.

mixin bem-block public view code open_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 bem-block(block) {
   background: green;
}

// Output
.block { background: green; }

Parameters

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

Aliases

mixin bem-elem public view code open_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

mixin bem-mod public view code open_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
$options *	Map	-	Optional configuration map
$options.not *	String\|List	-	Modifier(s) to exclude with :not()

Aliases

mixin bem-mods public view code open_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

mixin bem public view code open_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.