Выбор первого родителя в sass

217
22 июня 2018, 14:20

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

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

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

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

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

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

Answer 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 {}
READ ALSO
Перенести блок с поиском под шапку css

Перенести блок с поиском под шапку css

На сайте https://knigomaniaorg/ имеется адаптивный дизайн, но при нем блок с поиском уходит почти в самый низ страницы, на что очень жалуются пользователи

246
Почему не фильтрует по индексу?

Почему не фильтрует по индексу?

Вот как выглядит переменная sort

235
Получить Request headers с помощью WebRequest

Получить Request headers с помощью WebRequest

Такая проблема: На сайте стоит хорошая защита, есть кука, которая ставится "истекшей" сразу по загрузке страницы, но при $ajax эта кука всё равно...

196
Как закрыть Lightbox по клику на кнопку “Назад”?

Как закрыть Lightbox по клику на кнопку “Назад”?

На сайте есть модальное окно Bootstrap 4, в нем фотогалерея, список миниатюр картинокПо клику на миниатюру, она открывается на всю ширину экрана...

246