Импорт файлов

Стили сайта удобно хранить в нескольких файлах: переменные отдельно, кнопки отдельно, карточки отдельно. Директива @import подключает один файл Less в другой, и при компиляции получается один CSS-файл. В скобках после @import можно указать параметры, которые меняют поведение импорта.

Обычный импорт

Создайте файл с переменными и файл компонента:

// styles/variables.less
@primary: #2563eb;
@radius: 8px;

// styles/components/buttons.less
.btn {
  color: white;
  background: @primary;
  border-radius: @radius;
}

Главный файл только подключает остальные. Расширение .less можно не писать:

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

.btn {
  color: white;
  background: #2563eb;
  border-radius: 8px;
}

Компилируется только main.less. Все подключённые файлы видят переменные и миксины друг друга — в отличие от @use в Sass, где у каждого модуля своя область.

reference — взять, но не выводить

Параметр (reference) подключает файл как справочник: его правила не попадают в CSS, пока вы сами не используете их как миксин. Так из большой библиотеки берут только нужное:

// styles/library.less
.btn {
  padding: 8px 16px;
  border-radius: 8px;
}
 
.card {
  padding: 16px;
  border: 1px solid #e5e7eb;
}

// styles/main.less
@import (reference) "library";
 
.save-button {
  .btn();
  background: #16a34a;
}

.save-button {
  padding: 8px 16px;
  border-radius: 8px;
  background: #16a34a;
}

Правила .btn и .card в CSS не попали, а объявления .btn оказались в .save-button.

inline — вставить как есть

Обычный @import "file.css" Less оставляет как CSS-импорт. Параметр (inline) вставляет содержимое файла прямо в результат, без разбора:

/* styles/vendor/reset.css */
* {
  box-sizing: border-box;
}

// styles/main.less
@import (inline) "vendor/reset.css";
 
.card {
  padding: 16px;
}

/* styles/vendor/reset.css */
* {
  box-sizing: border-box;
}
 
.card {
  padding: 16px;
}

Другие параметры

Параметр	Что делает
`(once)`	Подключает файл один раз, даже если импортов несколько. Так работает по умолчанию
`(multiple)`	Подключает файл столько раз, сколько написано импортов
`(optional)`	Не падает с ошибкой, если файла нет
`(css)`	Оставляет `@import` в CSS, какое бы ни было расширение
`(less)`	Разбирает файл как Less, даже если у него расширение `.css`

Параметры можно сочетать через запятую: @import (reference, optional) "theme";.

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

Импорт файла с расширением .css без параметров не вставляет его содержимое:

// styles/main.less
@import "vendor/reset.css";
 
.card {
  padding: 16px;
}

@import "vendor/reset.css";
.card {
  padding: 16px;
}

Строка @import осталась в CSS, и браузер сделает отдельный запрос за vendor/reset.css — относительно папки css/, где файла нет. Чтобы собрать всё в один файл, пишите @import (inline) "vendor/reset.css"; или @import (less) "vendor/reset.css";.

Спасибо, что читаете!