Почему амперсант в SCSS имеет меньшую спецификацию?

Question

[MoffunW]

Первый вариант срабатывает и переписывает значение .promo_wrapper

&__wrapper не переписывает значение

Comments

[Ярослав Иванов]

Что?
Меньшую спецификацию? Что переписывает?

[MoffunW]

Ярослав Иванов, суть в том, что мой медиа запрос не переписывает значение если я пишу через амперсант... При таком синтаксисе не срабатывает:
.promo {
&__wrapper {
align-items: center;
}
}
не срабатывает. А если через класс .promo__wrapper то всё работает. В консоли никакой разницы нет. Класс такой же выводится, медиа-запрос не срабатывает.

&__wrapper :


.promo{.promo__wrapper{} }

Answer 1

[RAX7]

Потому что первый вариант компилтся в:

.promo .promo__wrapper {
  text-align: center;
}

а второй в:

.promo__wrapper {
  text-align: center;
}

css.yoksel.ru/specifity

Comments

[MoffunW]

Он компилится так из-за каких-то выставленных настроек? Просто с предыдущим проектом, вообще такого не возникало. Спокойно наслаждался амперсантом и всё работало.

[RAX7]

MoffunW, нет, он всегда так компилится https://sass-lang.com/documentation/style-rules/pa...
Скорее всего у тебя медиа-запросы написаны выше селекторов, т.е.

@media (...) {
  .selector {}
}
.selector {}

а должны быть ниже:

.selector {}
@media (...) {
  .selector {}
}

[MoffunW]

RAX7, о господи. Спасибо большое. Всё снова стало легче)

Answer 2

[Anton Polyakov]

В SCSS имеется возможность прописывать media прямо внутри класса. Попробуй, это намного удобнее