Why does the ampersand in SCSS have a smaller specification?

Question

css

The first option fires and overwrites the value of .promo_wrapper

&__wrapper does not overwrite the value

Answer 1

Because the first option compiles to:

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

and the second in:

.promo__wrapper {
  text-align: center;
}

css.yoksel.ru/specifity

Answer 2

In SCSS, it is possible to write media directly inside the class. Try it, it's much more convenient