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

Вложенность позволяет писать правило внутри другого правила, повторяя структуру HTML. Less сам склеивает селекторы при компиляции. Стили одного компонента собираются в одном блоке, и не нужно много раз писать .card.

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

Напишите стили карточки в styles/components/cards.less:

// styles/components/cards.less
.card {
  padding: 16px;
 
  .title {
    margin: 0;
  }
 
  p {
    color: #4b5563;
  }
}

.card {
  padding: 16px;
}
.card .title {
  margin: 0;
}
.card p {
  color: #4b5563;
}

Внутреннее правило стало селектором потомка: .card .title — это .title где угодно внутри .card.

Ссылка на родителя &

Символ & означает «селектор родителя». Он нужен, когда пробел между селекторами не нужен — для псевдоклассов и составных классов:

// styles/components/buttons.less
.btn {
  background: #2563eb;
 
  &:hover {
    background: #1d4ed8;
  }
 
  &.active {
    outline: 2px solid black;
  }
}

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

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

Модификаторы и родитель в конце

& можно склеивать с текстом, как в именах по БЭМ, и ставить в конец селектора:

// styles/components/buttons.less
.btn {
  color: white;
 
  &-large {
    padding: 12px 24px;
  }
 
  .dark & {
    color: black;
  }
}

.btn {
  color: white;
}
.btn-large {
  padding: 12px 24px;
}
.dark .btn {
  color: black;
}

<style>
  .btn {
    color: white;
  }
  .btn-large {
    padding: 12px 24px;
  }
  .dark .btn {
    color: black;
  }
</style>
 
<button class="btn btn-large" style="background: #2563eb">Обычная тема</button>
<div class="dark" style="padding: 8px">
  <button class="btn btn-large" style="background: #facc15">Тёмная тема</button>
</div>

&-large дал класс .btn-large, а .dark & — правило для кнопки внутри элемента с классом dark.

Медиазапросы внутри правила

@media можно вложить прямо в правило. Less вынесет его наружу и повторит селектор:

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

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

Так всё про карточку, включая адаптивность, остаётся в одном месте.

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

Глубокая вложенность «как в HTML» даёт длинные селекторы с высокой специфичностью:

// styles/components/cards.less
.page {
  .content {
    .card {
      .title {
        color: #111827;
      }
    }
  }
}

.page .content .card .title {
  color: #111827;
}

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