bem.ru.md

БЭМ

Эти возможности определены в файле _bem.scss.

Настройки:

• Настройки БЭМ

Примеси

block

Создаёт блок с указанным именем.

Синтаксис:

block ( имя ) {
    Стили
}

См. Пример блока

element

Создаёт элемент с указанным именем. Может использоваться только внутри block.

Синтаксис:

element ( имя [, имя2] ) {
    стили
}

Если указан только один аргумент, то имя класса будет составлено из имени текущего блока и этого аргумента. Если указано два аргумента, то первый будет использован как имя блока, а второй как имя элемента.

См. Пример блока

modifier

Создаёт модификатор блока или элемента. Может использоваться только внутри block или element.

Синтаксис:

modifier ( свойство [, значение ] ) {
    стили
}

См. Пример блока

Функции

element-class

Возвращает имя класса элемента.

Аргументы

$block

Имя блока.

$element

Имя элемента.

Возвращаемые значения

Имя класса с учётом настроек схемы именования.

Примеры

Пример блока

@include block(foo) {
    display: block;
    
    @include element(bar) {
        display: inline;
        
        @include modifier(important) {
            font-weight: bolder;
        }
    }
    
    @include modifier(size, large) {
        font-size: 1.5rem;
    }
}

CSS:

.foo {
    font-size: 1rem;
    display: block;
}
.foo__bar {
    display: inline;
}
.foo__bar_important {
    font-weight: bolder;
}
.foo_size_large {
    font-size: 1.5rem;
}