1

При использовании BEM нужно использовать характерное именование которое в scss достигается таким образом.

.navbar{
    &__logo{}
    &__link{}
    &__call{}
}

Однако & ссылается на своего родителя, а не на корневого из-за чего при более глубокой вложенности получается так:

.navbar{
    &__logo{}
    &__anchors {
        &__link{}
    }
    &__call{}
}

И на выходе вместо .navbar__link мы получаем .navbar__anchor__link что не соответствует методологии.

Как сослаться на корневого родителя, а не на своего?

1 ответ 1

1

Символ & будет заменен на родительский селектор, каким он компилируется в CSS. Это означает, что если у вас есть глубоко вложенное правило, родительский селектор будет полностью вычислен до символа & и подставится вместо него.

Для получения .navbar__link используйте:

.navbar{
    &__logo{}    
    &__link{}   
    &__call{}
}

Для ссылки на корневой можно использовать @at-root, но не рекомендую:

$class: '.navbar';

#{$class}{
    &__logo{}
    &__anchors {
       @at-root #{$class} { 
        &__link{}
       }
    }
    &__call{}
}

На выходе:

.navbar__logo {}
.navbar__link {}
.navbar__call {}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.