sass-bem

[private] bem-index

@function bem-index($string) { ... }

Description

Parameters

Returns

Requires

• [function] math-min
• [variable] bem-element-separator
• [variable] bem-modifier-separator

Used by

• [function] get-block

[private] block-selector (aliased as b-selector )

@function block-selector($block) { ... }

Description

Parameters

Returns

Used by

• [function] b-selector
• [mixin] block

See

• [mixin] block

[private] component-selector (aliased as c-selector )

@function component-selector($component, $namespace) { ... }

Description

Parameters

Returns

Used by

• [function] c-selector
• [mixin] component

See

• [mixin] component

[private] element-selector (aliased as e-selector ee-selector )

@function element-selector($element, $nested: false) { ... }

Description

Parameters

Returns

Requires

• [function] is-block
• [function] get-block
• [variable] bem-element-separator

Used by

• [function] e-selector
• [function] ee-selector
• [mixin] element

See

• [mixin] element

[private] explode

@function explode($string, $separator) { ... }

Description

Parameters

Returns

Used by

• [mixin] parse
• [function] duo-selector

[private] get-block

@function get-block($selector) { ... }

Description

Parameters

Returns

Requires

• [function] bem-index
• [function] is-block

Used by

• [function] element-selector
• [function] at-selector
• [function] next-selector
• [function] with-selector
• [function] while-selector

[private] hack-selector (aliased as _-selector )

@function hack-selector($hack, $namespace) { ... }

Description

Parameters

Returns

Used by

• [function] _-selector
• [mixin] hack

See

• [mixin] hack

[private] has-pseudo

@function has-pseudo($selector) { ... }

Description

Parameters

Returns

Used by

• [function] is-block

[private] has-state

@function has-state($selector) { ... }

Description

Parameters

Returns

Requires

• [variable] bem-state-separator

Used by

• [function] is-block

[private] implode

@function implode($list, $glue: '', $is-nested) { ... }

Description

Parameters

Returns

Used by

• [mixin] parse
• [function] at-selector

[private] is-block

@function is-block($selector) { ... }

Description

Parameters

Returns

Requires

• [function] is-element
• [function] is-modifier
• [function] has-state
• [function] has-pseudo

Used by

• [function] element-selector
• [function] get-block

[private] is-element

@function is-element($selector) { ... }

Description

Parameters

Returns

Requires

• [variable] bem-element-separator

Used by

• [function] is-block

[private] is-modifier

@function is-modifier($selector) { ... }

Description

Parameters

Returns

Requires

• [variable] bem-modifier-separator

Used by

• [function] is-block

[private] math-min

@function math-min($a, $n, $default: 0) { ... }

Description

Parameters

Returns

Used by

• [function] bem-index

[private] modifier-selector (aliased as m-selector )

@function modifier-selector($modifier) { ... }

Description

Parameters

Returns

Requires

• [variable] bem-modifier-separator

Used by

• [function] m-selector
• [mixin] modifier

See

• [mixin] modifier

[private] object-selector (aliased as o-selector )

@function object-selector($object, $namespace) { ... }

Description

Parameters

Returns

Used by

• [function] o-selector
• [mixin] object

See

• [mixin] object

[private] first-selector

@function first-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] first

[private] last-selector

@function last-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] last

[private] even-selector

@function even-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] even

[private] odd-selector

@function odd-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] odd

[private] before-selector

@function before-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] before

[private] after-selector

@function after-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] after

at-selector

@function at-selector($modifier) { ... }

Description

Parameters

Returns

Requires

• [function] get-block
• [function] implode
• [variable] bem-modifier-separator

Used by

• [mixin] at

See

• [mixin] at

next-selector

@function next-selector($element) { ... }

Description

Parameters

Returns

Requires

• [function] get-block
• [variable] bem-element-separator

Used by

• [mixin] next

See

• [mixin] next

duo-selector

@function duo-selector() { ... }

Description

Parameters

None.

Returns

Requires

• [function] explode

Used by

• [mixin] duo

See

• [mixin] duo

with-selector

@function with-selector($element) { ... }

Description

Parameters

Returns

Requires

• [function] get-block
• [variable] bem-element-separator

Used by

• [mixin] with

See

• [mixin] with

while-selector

@function while-selector($modifier) { ... }

Description

Parameters

Returns

Requires

• [function] get-block
• [variable] bem-modifier-separator

Used by

• [mixin] while

See

• [mixin] while

[private] scope-selector (aliased as s-selector )

@function scope-selector($scope, $namespace) { ... }

Description

Parameters

Returns

Used by

• [function] s-selector
• [mixin] scope

See

• [mixin] scope

[private] splice

@function splice($list, $value, $recursive: false) { ... }

Description

Parameters

Returns

Used by

• [mixin] parse

[private] state-selector (aliased as is-selector has-selector js-selector )

@function state-selector($state, $namespace: null) { ... }

Description

Parameters

Returns

Used by

• [function] is-selector
• [function] has-selector
• [function] js-selector
• [mixin] state

See

• [mixin] state

[private] hover-selector

@function hover-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] hover

[private] focus-selector

@function focus-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] focus

[private] active-selector

@function active-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] active

[private] link-selector

@function link-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] link

[private] visited-selector

@function visited-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] visited

[private] checked-selector

@function checked-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] checked

[private] disabled-selector

@function disabled-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] disabled

[private] readonly-selector

@function readonly-selector() { ... }

Description

Parameters

None.

Returns

See

• [mixin] readonly

[private] contenteditable-selector (aliased as editable-selector )

@function contenteditable-selector() { ... }

Description

Parameters

None.

Returns

Used by

• [function] editable-selector

See

• [mixin] contenteditable

[private] str-replace

@function str-replace($string, $search, $replace: '') { ... }

Description

Parameters

Returns

Used by

• [mixin] parse

[private] test-selector (aliased as qa-selector )

@function test-selector($test, $namespace) { ... }

Description

Parameters

Returns

Used by

• [function] qa-selector
• [mixin] test

See

• [mixin] test

[private] theme-selector (aliased as t-selector )

@function theme-selector($theme, $namespace) { ... }

Description

Parameters

Returns

Used by

• [function] t-selector
• [mixin] theme

See

• [mixin] theme

[private] utility-selector (aliased as u-selector )

@function utility-selector($utility, $namespace) { ... }

Description

Parameters

Returns

Used by

• [function] u-selector
• [mixin] utility

See

• [mixin] utility

block (aliased as b )

@mixin block($block) { ... }

Description

Parameters

Content

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

Example

@include block('list') {
    color: black;
}

@include b('list') {
    color: black;
}

.list {
    color: black;
}

.list {
    color: black;
}

Requires

• [function] block-selector
• [variable] bem-debug

Used by

• [mixin] b

component (aliased as c )

@mixin component($component, $namespace: null) { ... }

Description

Parameters

Content

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

Example

@include component('list') {
    color: black;
}

 @include c('list') {
    color: black;
}

.c-list {
    color: black;
 }

.c-list {
    color: black;
}

Requires

• [function] component-selector
• [variable] bem-debug

Used by

• [mixin] c

element (aliased as e ee )

@mixin element($element, $nested: false) { ... }

Description

Parameters

Content

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

Example

@include block('list') {
    @include element('item') {
        color: black;
    }
}

@include b('list') {
    @include e('item') {
        color: black;
    }
}

@include b('list') {
    @include e('item') {
        @include ee('link') {
            color: black;
        }
    }
}

@include b('list') {
    @include e(('item', 'link')) {
        color: black;
    }
}

.list__item {
    color: black;
}

.list__item {
    color: black;
}

.list__item__link {
    color: black;
}

.list__item, .list__link {
    color: black;
}

Requires

• [function] element-selector
• [variable] bem-debug

Used by

• [mixin] e
• [mixin] ee

hack (aliased as _ )

@mixin hack($hack, $namespace: null) { ... }

Description

Parameters

Content

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

Example

@include hack('clearfix') {
    color: black;
}

@include _('clearfix') {
    color: black;
}

._clearfix {
    color: black;
}

._clearfix {
    color: black;
}

Requires

• [function] hack-selector
• [variable] bem-debug

Used by

• [mixin] _

modifier (aliased as m )

@mixin modifier($modifier) { ... }

Description

Parameters

Content

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

Example

@include block('list') {
    @include modifier('inline') {
        color: black;
    }
}

@include b('list') {
    @include m('inline') {
        color: black;
    }
}

@include b('list') {
    @include m(('inline', 'ordered')) {
        color: black;
    }
}

.list--inline {
    color: black;
}

.list--inline {
    color: black;
}

.list--inline, .list--ordered {
    color: black;
}

Requires

• [function] modifier-selector
• [variable] bem-debug

Used by

• [mixin] m

object (aliased as o )

@mixin object($object, $namespace: null) { ... }

Description

Parameters

Content

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

Example

@include object('button') {
    color: black;
}

@include o('button') {
    color: black;
}

.o-button {
    color: black;
}

.o-button {
    color: black;
}

Requires

• [function] object-selector
• [variable] bem-debug

Used by

• [mixin] o

parse (aliased as p )

@mixin parse($selectors) { ... }

Description

Parameters

Content

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

Example

@include b('list') {
    @include parse('&', 'm:inline', ':hover', '[disabled]') {
        color: black;
    }
}

.list, .list--inline, .list:hover, .list[disabled] {
    color: black;
}

Throws

• Mixin #{nth($parts, 1)} doesn

Requires

• [function] splice
• [function] explode
• [function] str-replace
• [function] implode
• [variable] bem-shortcodes

Used by

• [mixin] p

first

@mixin first() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include first {
        color: black;
    }
}

.list:first-of-type {
    color: black;
}

last

@mixin last() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include last {
        color: black;
    }
}

.list:last-of-type {
    color: black;
}

even

@mixin even() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include even {
        color: black;
    }
}

.list:nth-child(even) {
    color: black;
}

odd

@mixin odd() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include odd {
        color: black;
    }
}

.list:nth-child(odd) {
    color: black;
}

before

@mixin before() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include before {
        color: black;
    }
}

.list:before {
    color: black;
}

after

@mixin after() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include after {
        color: black;
    }
}

.list:after {
    color: black;
}

at

@mixin at($modifiers) { ... }

Description

Parameters

Content

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

Example

@include b('list') {
    @include e('item') {
        @include at('inline') {
            color: black;
        }
    }
}

@include b('list') {
    @include e('item') {
        @include at('inline', 'inverse') {
            color: black;
        }
    }
}

.list--inline .list__item {
    color: black;
}

.list--inline.list--inverse .list__item {
    color: black;
}

Requires

• [function] at-selector

next

@mixin next($element) { ... }

Description

Parameters

Content

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

Example

@include b('list') {
    @include e('item') {
        @include next('title') {
            color: black;
        }
    }
}

.list__item + .list__title {
    color: black;
}

Requires

• [function] next-selector

duo

@mixin duo() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include e('item') {
        @include duo {
            color: black;
        }
    }
}

.list__item + .list__item {
    color: black;
}

Requires

• [function] duo-selector

with

@mixin with($element) { ... }

Description

Parameters

Content

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

Example

@include b('list') {
    @include e('item') {
        @include with('title') {
            color: black;
        }
    }
}

.list__item ~ .list__title {
    color: black;
}

Requires

• [function] with-selector

while

@mixin while($modifier) { ... }

Description

Parameters

Content

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

Example

@include b('list') {
    @include m('inline') {
        @include while('ordered') {
            color: black;
        }
    }
}

.list--inline.list--ordered {
    color: black;
}

Requires

• [function] while-selector

scope (aliased as s )

@mixin scope($scope, $namespace: null) { ... }

Description

Parameters

Content

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

Example

@include scope('paper') {
    color: black;
}

@include s('paper') {
    color: black;
}

.s-paper {
    color: black;
}

.s-paper {
    color: black;
}

Requires

• [function] scope-selector
• [variable] bem-debug

Used by

• [mixin] s

state (aliased as is has js )

@mixin state($state, $namespace: null) { ... }

Description

Parameters

Content

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

Example

@include b('list') {
    @include state('active', 'is') {
        color: black;
    }
}

.list.is-active {
    color: black;
}

Requires

• [function] state-selector
• [variable] bem-debug

Used by

• [mixin] is
• [mixin] has
• [mixin] js

hover

@mixin hover() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include hover {
        color: black;
    }
}

.list:hover {
    color: black;
}

focus

@mixin focus() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include focus {
        color: black;
    }
}

.list:focus {
    color: black;
}

active

@mixin active() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include active {
        color: black;
    }
}

.list:active {
    color: black;
}

link

@mixin link() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include link {
        color: black;
    }
}

.list:link {
    color: black;
}

visited

@mixin visited() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include visited {
        color: black;
    }
}

.list:visited {
    color: black;
}

checked

@mixin checked() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include checked {
        color: black;
    }
}

.list:checked {
    color: black;
}

disabled

@mixin disabled() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include disabled {
        color: black;
    }
}

.list[disabled] {
    color: black;
}

readonly

@mixin readonly() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include readonly {
        color: black;
    }
}

.list[readonly] {
    color: black;
}

contenteditable (aliased as editable )

@mixin contenteditable() { ... }

Description

Parameters

None.

Content

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

Example

@include b('list') {
    @include contenteditable {
        color: black;
    }
}

.list[contenteditable="true"] {
    color: black;
}

test (aliased as qa )

@mixin test($test, $namespace: null) { ... }

Description

Parameters

Content

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

Example

@include test('list') {
    color: black;
}

@include qa('list') {
    color: black;
}

.list.is-active {
    color: black;
}

.list.is-active {
    color: black;
}

Requires

• [function] test-selector
• [variable] bem-debug

Used by

• [mixin] qa

theme (aliased as t )

@mixin theme($theme, $namespace: null) { ... }

Description

Parameters

Content

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

Example

@include theme('dark') {
    color: black;
}

@include t('dark') {
    color: black;
}

.t-dark {
    color: black;
}

.t-dark {
    color: black;
}

Requires

• [function] theme-selector
• [variable] bem-debug

Used by

• [mixin] t

utility (aliased as u )

@mixin utility($utility, $namespace: null) { ... }

Description

Parameters

Content

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

Example

@include utility('uppercase') {
    color: black;
}

@include u('uppercase') {
    color: black;
}

.u-uppercase {
    color: black;
}

.u-uppercase {
    color: black;
}

Requires

• [function] utility-selector
• [variable] bem-debug

Used by

• [mixin] u

bem

$bem: (
	'debug': false,
	'separator': (
		'element': "__",
		'modifier': "--",
		'state': "-",
	),
	'namespace': (
		'component': "c",
		'hack': "_",
		'object': "o",
		'scope': "s",
		'test': "qa",
		'theme': "t",
		'utility': "u",
	),
	'shortcodes': (
		'ab': ('before', 'after')
	)
) !default;

Description

Type

Map

Map structure

bem-debug

$bem-debug: map-get($bem, 'debug') !default;

Description

Type

Boolean

Used by

• [mixin] block
• [mixin] component
• [mixin] element
• [mixin] hack
• [mixin] modifier
• [mixin] object
• [mixin] scope
• [mixin] state
• [mixin] test
• [mixin] theme
• [mixin] utility

bem-element-separator

$bem-element-separator: map-get(map-get($bem, 'separator'), 'element') !default;

Description

Type

String

Used by

• [function] bem-index
• [function] element-selector
• [function] is-element
• [function] next-selector
• [function] with-selector

bem-modifier-separator

$bem-modifier-separator: map-get(map-get($bem, 'separator'), 'modifier') !default;

Description

Type

String

Used by

• [function] bem-index
• [function] is-modifier
• [function] modifier-selector
• [function] at-selector
• [function] while-selector

bem-state-separator

$bem-state-separator: map-get(map-get($bem, 'separator'), 'state') !default;

Description

Type

String

Used by

• [function] has-state

bem-component-namespace

$bem-component-namespace: map-get(map-get($bem, 'namespace'), 'component') !default;

Description

Type

String

bem-hack-namespace

$bem-hack-namespace: map-get(map-get($bem, 'namespace'), 'hack') !default;

Description

Type

String

bem-object-namespace

$bem-object-namespace: map-get(map-get($bem, 'namespace'), 'object') !default;

Description

Type

String

bem-scope-namespace

$bem-scope-namespace: map-get(map-get($bem, 'namespace'), 'scope') !default;

Description

Type

String

bem-test-namespace

$bem-test-namespace: map-get(map-get($bem, 'namespace'), 'test') !default;

Description

Type

String

bem-theme-namespace

$bem-theme-namespace: map-get(map-get($bem, 'namespace'), 'theme') !default;

Description

Type

String

bem-utility-namespace

$bem-utility-namespace: map-get(map-get($bem, 'namespace'), 'utility') !default;

Description

Type

String

bem-shortcodes

$bem-shortcodes: map-get($bem, 'shortcodes') !default;

Description

Type

List

Used by

• [mixin] parse