Пространства имён и карты

Когда миксинов становится много, их имена начинают пересекаться: .button() может быть и у вас, и в подключённой библиотеке. Пространство имён — это правило-контейнер, внутри которого лежат миксины; снаружи к ним обращаются через имя контейнера. А карта — это набор пар «ключ: значение» в одной переменной, например все цвета темы.

Пространство имён

Объявите контейнер #ui в styles/mixins.less. Скобки после имени не дают ему попасть в CSS:

// styles/mixins.less
#ui() {
  .button() {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
  }
 
  .card() {
    padding: 16px;
    border: 1px solid #e5e7eb;
  }
}

Вызывайте миксины через имя контейнера:

// styles/components/buttons.less
.btn {
  #ui.button();
}

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

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
}

Запись #ui > .button(); делает то же самое — её можно встретить в старом коде, например в Bootstrap 3 (#gradient > .vertical()).

Карты

Переменной можно присвоить набор объявлений в фигурных скобках. Тогда к отдельному значению обращаются по ключу в квадратных скобках:

// styles/variables.less
@colors: {
  primary: #2563eb;
  danger: #dc2626;
  text: #111827;
}

// styles/main.less
@import "variables";
 
.btn-primary {
  color: white;
  background: @colors[primary];
}
 
.alert-danger {
  color: @colors[danger];
}

.btn-primary {
  color: white;
  background: #2563eb;
}
.alert-danger {
  color: #dc2626;
}

<style>
  .btn-primary {
    color: white;
    background: #2563eb;
  }
  .alert-danger {
    color: #dc2626;
  }
</style>
 
<button class="btn-primary">Сохранить</button>
<p class="alert-danger">Заполните заголовок поста.</p>

Так вся палитра хранится в одной переменной, а не в десяти. В Sass карта пишется в круглых скобках, а значение достают функцией map.get().

Миксин как карта

Ключом может быть и переменная внутри миксина. Это удобно, когда настройки сгруппированы по темам:

// styles/variables.less
#theme() {
  @radius: 8px;
  @gap: 16px;
}

// styles/main.less
@import "variables";
 
.card {
  padding: #theme[@gap];
  border-radius: #theme[@radius];
}

.card {
  padding: 16px;
  border-radius: 8px;
}

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

Если объявить пространство имён и миксин в нём без скобок, получится обычное вложенное правило, и оно попадёт в CSS:

// styles/mixins.less
#ui {
  .button {
    padding: 8px 16px;
  }
}

#ui .button {
  padding: 8px 16px;
}

В CSS появилось лишнее правило #ui .button. Ставьте скобки и у контейнера, и у миксинов внутри: #ui() и .button().