Отсоединённые наборы правил

Отсоединённый набор правил (detached ruleset) — это блок объявлений и правил в фигурных скобках, сохранённый в переменную. Его можно вызвать в любом месте или передать в миксин как аргумент. Главная польза — миксин, который оборачивает ваш блок стилей, например в медиазапрос. В Sass для этого служит @content.

Набор правил в переменной

Сохраните блок стилей в переменную и вызовите его со скобками:

// styles/main.less
@focus-ring: {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
};
 
.btn:focus-visible {
  @focus-ring();
}
 
.field:focus-visible {
  @focus-ring();
}

.btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.field:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

<style>
  .btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }
  .field:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }
</style>
 
<button class="btn">Нажмите Tab</button>
<input class="field" placeholder="Заголовок поста">

Нажмите Tab, чтобы перейти на кнопку и поле: у каждого появится синяя рамка фокуса.

Блок стилей как аргумент миксина

Миксин может принимать набор правил и вставлять его внутрь медиазапроса. Опишите его в styles/mixins.less:

// styles/mixins.less
.desktop(@rules) {
  @media (min-width: 768px) {
    @rules();
  }
}

Передайте блок в фигурных скобках прямо при вызове:

// styles/components/cards.less
.card {
  padding: 16px;
 
  .desktop({
    padding: 32px;
    display: flex;
  });
}

// styles/main.less
@import "mixins";
@import "components/cards";

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

Точка перелома записана один раз — в миксине. Если она изменится, вы правите одну строку, а не каждый медиазапрос.

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

Набор может содержать не только объявления, но и правила с &:

// styles/main.less
@hover-dark: {
  &:hover {
    background: #111827;
  }
};
 
.btn {
  background: #2563eb;
  @hover-dark();
}

.btn {
  background: #2563eb;
}
.btn:hover {
  background: #111827;
}

& подставил селектор того правила, где набор вызван.

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

Набор правил вызывается только со скобками. Без них Less считает запись обращением к значению карты и останавливается:

// styles/main.less
@focus-ring: {
  outline: 2px solid #2563eb;
};
 
.btn:focus-visible {
  @focus-ring;
}

Компиляция падает с ошибкой Missing '[...]' lookup in variable call. Пишите @focus-ring();.