Операции и единицы

Less умеет считать прямо в стилях: +, -, * и / работают с числами, единицами измерения и цветами. Так размеры выводятся из одной базовой величины: изменили шаг сетки — пересчитались все отступы.

Арифметика

Заведите базовый отступ и выведите из него остальные в styles/main.less:

// styles/main.less
@gap: 16px;
 
.card {
  padding: @gap;
  margin-bottom: @gap * 2;
  border-radius: @gap - 12;
}

.card {
  padding: 16px;
  margin-bottom: 32px;
  border-radius: 4px;
}

Число без единицы (2, 12) берёт единицу соседнего значения: @gap - 12 даёт 4px.

Единицы

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

// styles/main.less
.ruler {
  width: 2cm + 5mm;
  height: 4px + 2em;
}

.ruler {
  width: 2.5cm;
  height: 6px;
}

2cm + 5mm честно дали 2.5cm, а 4px + 2em — бессмысленные 6px: Less не знает, сколько пикселей в em. Для смешанных единиц используйте calc() CSS, его посчитает браузер.

Деление только в скобках

В CSS косая черта — обычный разделитель (font: 14px/1.5, grid-row: 1 / 3). Поэтому в Less 4 деление выполняется только внутри скобок:

// styles/main.less
@gap: 16px;
 
.card {
  padding: (@gap / 2);
  grid-row: 1 / 3;
}

.card {
  padding: 8px;
  grid-row: 1 / 3;
}

В скобках Less поделил, а 1 / 3 оставил как есть. Остальные операции работают и без скобок. В Sass деление записывается функцией math.div().

Математические функции

Функция	Что делает	Пример	Результат
`percentage()`	Число в проценты	`percentage(0.25)`	`25%`
`round()`	Округляет, второй аргумент — знаки	`round(33.333%, 1)`	`33.3%`
`ceil()`, `floor()`	Округляют вверх и вниз	`floor(4.8px)`	`4px`
`unit()`	Меняет или убирает единицу	`unit(1.5, rem)`	`1.5rem`
`min()`, `max()`	Меньшее и большее значение	`max(8px, 12px)`	`12px`

Пример: ширина колонки сетки и размер шрифта в rem из пикселей:

// styles/main.less
@columns: 12;
 
.col-4 {
  width: round(percentage((4 / @columns)), 2);
}
 
.lead {
  font-size: unit((20 / 16), rem);
}

.col-4 {
  width: 33.33%;
}
.lead {
  font-size: 1.25rem;
}

<style>
  .col-4 {
    width: 33.33%;
  }
  .lead {
    font-size: 1.25rem;
  }
</style>
 
<div class="col-4" style="background: #dbeafe">Треть ширины</div>
<p class="lead">Крупный вводный текст</p>

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

Деление без скобок не выполняется — Less 4 молча оставляет выражение как есть:

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

.card {
  padding: 16px / 2;
}

Браузер не понимает 16px / 2 в padding и отбрасывает всё объявление. Пишите (@gap / 2). Старые проекты под Less 3 иногда собирают с флагом --math=always, который возвращает прежнее поведение.

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