Урок 06 · 10 хв

Батько &

& — той селектор, усередині якого пишеш. .btn { &:hover } → .btn:hover.

& підставляє батька. &:hover, &.is-on, & + &. Можна &__title у БЕМ: .card { &__title {} } → .card__title. Не пиши & .child там, де вистачить .child з нормальним класом — отримаєш зайву вкладеність.

Стани кнопки

Можна спитати про це правило«& ліворуч — інший селектор»

#{&}, якщо потрібна інтерполяція в дивному місці.
Медіа: .card { @media (min-width: 40rem) { & { … } } } — & тут часто зайвий, властивості й так усередині .card.
Не будуй селектор & & &: налагодження в DevTools стане квестом.

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. .btn { &:hover {} } стане
2. .card { &__title {} } це
3. .btn { .theme-dark & {} } цілиться в