Переменные

Переменная хранит значение под именем, чтобы использовать его много раз: цвет, размер, шрифт. В Less имя переменной начинается с @ (в Sass — с $). Когда основной цвет сайта меняется, вы правите одну строку, а не ищете его по всему проекту.

Объявление и использование

Переменная объявляется как свойство CSS: имя, двоеточие, значение. Напишите в styles/main.less:

// styles/main.less
@primary: #2563eb;
@radius: 8px;
 
.btn {
  color: white;
  background: @primary;
  border-radius: @radius;
}

После компиляции переменных не остаётся — только их значения:

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

Подходит любое значение CSS

В переменной может быть число с единицей, цвет, строка или целый список значений:

// styles/main.less
@font-main: system-ui, sans-serif;
@shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
@gap: 16px;
 
.card {
  padding: @gap;
  font-family: @font-main;
  box-shadow: @shadow;
}

.card {
  padding: 16px;
  font-family: system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

<style>
  .card {
    padding: 16px;
    font-family: system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
</style>
 
<div class="card">Карточка с тенью</div>

Область видимости

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

// styles/main.less
@gap: 16px;
 
.card {
  @gap: 24px;
  padding: @gap;
}
 
.alert {
  padding: @gap;
}

.card {
  padding: 24px;
}
.alert {
  padding: 16px;
}

В .card действует локальная @gap, в .alert — глобальная.

Ленивое вычисление

Less сначала собирает все переменные области, а потом подставляет значения. Это называется ленивым вычислением. Из него следуют два правила: переменную можно использовать до объявления, и если имя объявлено дважды, побеждает последнее объявление.

// styles/main.less
.badge {
  background: @accent;
}
 
@accent: #16a34a;
@accent: #f97316;

.badge {
  background: #f97316;
}

Цвет оранжевый: строка @accent: #f97316 стоит ниже. Так устроены темы Bootstrap 3: вы подключаете его переменные, а ниже объявляете свои — и они заменяют значения по всей библиотеке. В Sass наоборот: значение берётся в момент использования, а для «умолчаний» нужен флаг !default.

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

Из-за ленивого вычисления «временно поменять» переменную на середине файла нельзя:

// styles/main.less
@size: 14px;
.small { font-size: @size; }
 
@size: 20px;
.large { font-size: @size; }

.small {
  font-size: 20px;
}
.large {
  font-size: 20px;
}

Оба правила получили 20px, потому что последнее объявление действует во всей области. Для разных значений заведите разные переменные: @size-small и @size-large.