Вложенность и селектор &

Вложенность — это правила для дочерних элементов, записанные внутри правила родителя. Sass превращает вложенные правила в обычные плоские селекторы. Так все стили одного компонента — карточки, кнопки — остаются в одном блоке.

Вложенные правила

Правило внутри другого правила относится к потомкам, как если бы селекторы стояли через пробел. Пока все примеры пишутся в styles/main.scss, по файлам их разложит глава о модулях:

// styles/main.scss
.card {
  padding: 16px;
 
  h3 {
    margin: 0;
  }
 
  p {
    color: gray;
  }
}

.card {
  padding: 16px;
}
.card h3 {
  margin: 0;
}
.card p {
  color: gray;
}

Родительский селектор &

Знак & обозначает селектор родителя. С ним состояния и классы прикрепляются к самому родителю, а не ищутся среди потомков:

// styles/main.scss
.btn {
  background: #2563eb;
 
  &:hover {
    background: #1d4ed8;
  }
 
  &.is-active {
    outline: 2px solid black;
  }
}

.btn {
  background: #2563eb;
}
.btn:hover {
  background: #1d4ed8;
}
.btn.is-active {
  outline: 2px solid black;
}

Без & запись :hover превратилась бы в .btn :hover — наведение на любой элемент внутри кнопки.

Суффиксы имён классов

В Sass к & можно приклеить текст и получить новое имя класса. Это удобно для именования по БЭМ, где элементы и модификаторы повторяют имя блока:

// styles/main.scss
.card {
  padding: 16px;
 
  &__title {
    font-size: 20px;
  }
 
  &--featured {
    border: 2px solid gold;
  }
}

.card {
  padding: 16px;
}
.card__title {
  font-size: 20px;
}
.card--featured {
  border: 2px solid gold;
}

<style>
  .card {
    padding: 16px;
  }
  .card__title {
    font-size: 20px;
  }
  .card--featured {
    border: 2px solid gold;
  }
</style>
 
<div class="card card--featured">
  <h3 class="card__title">Избранная карточка</h3>
</div>

Встроенная вложенность CSS так не умеет: в CSS запись &__title недопустима. Это одна из причин оставаться на Sass.

Вложенные медиазапросы

Медиазапрос можно написать прямо внутри правила. Sass вынесет его наружу и повторит селектор:

// styles/main.scss
.card {
  padding: 16px;
 
  @media (min-width: 768px) {
    padding: 32px;
  }
}

.card {
  padding: 16px;
}
@media (min-width: 768px) {
  .card {
    padding: 32px;
  }
}

Вложенность Sass и вложенность CSS

Встроенная вложенность из учебника HTML и CSS работает в браузерах с 2023 года и подходит для простых случаев. Вложенность Sass компилируется в плоские селекторы, поэтому работает в любом браузере и поддерживает суффиксы вроде &__title. Если проект уже на Sass, пользуйтесь его вложенностью — смесь двух подходов в одном файле только запутывает.

Частая ошибка

Глубокая вложенность копирует структуру HTML в CSS и создаёт длинные тяжёлые селекторы:

// styles/main.scss
.page {
  .content {
    .card {
      .title {
        color: navy;
      }
    }
  }
}

.page .content .card .title {
  color: navy;
}

Такое правило ломается при первом изменении разметки, и его трудно переопределить. Ограничивайтесь двумя-тремя уровнями и давайте элементам собственные классы.