@colorkid

Как в SCSS(SASS) унаследовать вложенность?

Всем привет. Периодически возникают такие куски кода:
.main-menu {
        display: none;
        position: absolute;
        left: 0;
        top: 50px;
        background-color: #fff;

        &--open {
            display: block;

            .main-menu__link {
            }
        }
    }


как main-menu__link не писать в данном случае полностью, а как всегда через &, но с учетом того что к нас есть модификатор родитель кого блока? Что бы получалось что-то типа этого:
.main-menu {
        display: none;
        position: absolute;
        left: 0;
        top: 50px;
        background-color: #fff;

        &--open {
            display: block;

           &__link{} // и что бы получалось в итоге селектор main-menu__link а не main-menu--open__link
        }
    }
  • Вопрос задан
  • 322 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
.main-menu {
    $this: &;
    display: none;
    &--open {
        display: block;
        #{$this}__link {  }
    }
}


Но я предпочитаю такой вариант:

.main-menu {
    display: none;
    &--open { display: block; }
    &--open &__link {  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы