Функции в Less CSS — руководство и примеры

Логотип Less CSS на фоне человека, работающего за MacBook

Less CSS — это надёжный и гибкий препроцессор для CSS, который расширяет синтаксис «ванильного» (обычного) CSS и добавляет удобные конструкции: переменные, вложенность, миксины и функции. Если вы уже умеете писать стандартный CSS, переход на Less обычно не требует крутой кривой обучения — многие концепции понятны сразу, а код остаётся совместимым.

Что такое функции и зачем они нужны?

Функция — это именованный блок логики, который принимает входные данные (параметры), обрабатывает их и возвращает результат. В языке программирования функции помогают сократить дублирование кода и вынести повторяющуюся логику в одно место.

Простой пример на JavaScript (объяснение переведено для контекста):

function checkDiscount(price, threshold) {
  if (price >= threshold) {
    let discount = 5 / 100 * price;
    return `Your discount is $${discount}`;
  } else {
    return `Sorry, this item does not qualify for a discount.`;
  }
}

let price = prompt("Enter the item price: ");
alert(checkDiscount(price, 500));

Здесь функция checkDiscount вычисляет скидку и возвращает строку. В Less функции похожи по идее: они принимают аргументы, выполняют операции и возвращают значения для использования в стилях.

Важно: в контексте CSS и Less функции чаще возвращают значения свойств (цвета, размеры, строки для content и т. п.), а не выполняют побочные эффекты, как в общих языках программирования.

Понимание функций в Less CSS

В обычном CSS доступен ограниченный набор встроенных функций (например, calc(), rgb(), var() и т. п.). Less добавляет собственные функции, которые могут делать не только арифметику, но и логические проверки, работу со строками и списками.

Пример использования встроенной CSS-функции calc():

p {
  background-color: red;
  width: calc(13px - 4px);
}

В Less вы встретите функции вроде if(). Она принимает три параметра: условие, значение при true и значение при false.

@width: 10px;
@height: 20px;

div {
  margin: if((@width > @height), 10px, 20px);
}

При компиляции Less-код станет приблизительно таким:

div {
  margin: 20px;
}

Пояснение: Less проверил условие (@width > @height). Поскольку 10px не больше 20px, вернулся второй аргумент — 20px.

Важно: Less сравнивает значения с учётом единиц (px, rem и т. д.), поэтому будьте внимательны при смешении разных единиц.

Булевы значения в Less

Boolean — это значение true или false. В Less есть функция boolean(), которая оценивает выражение и возвращает булево значение, которое можно сохранить в переменной.

@text-color: red;
@bg-color: boolean(@text-color = red);

div {
  background-color: if(@bg-color, green, yellow);
}

После компиляции получим:

div {
  background-color: green;
}

Пояснение: boolean(@text-color = red) вернёт true, поэтому if() выберет зелёный цвет.

Совет: boolean() полезна, когда вы хотите кешировать результат условия и использовать его в нескольких местах стилей.

Замена текста в строках: replace()

Синтаксис функции replace в Less:

replace(string, pattern, replacement, flags)

string — исходная строка;
pattern — что ищем (строка или регулярное выражение);
replacement — на что заменяем;
flags — необязательные флаги регулярного выражения (например, ‘g’, ‘i’).

Пример:

@string: "Hello";
@pattern: "ello";
@replacement: "i";

div::before {
  content: replace(@string, @pattern, @replacement);
}

После компиляции:

div::before {
  content: "Hi";
}

Применение: replace() удобно использовать для динамического формирования строк в псевдоэлементах, генерации классов или корректировки текстов в зависимости от переменных.

Функции для списков

В Less списки задаются через запятые или пробелы. Пример списка:

@groceries: "bread", "banana", "potato", "milk";

Частые функции для работы со списками:

length(list) — возвращает число элементов;
extract(list, n) — возвращает n-й элемент (индексация начинается с 1);
range(start, end [, step]) — генерирует последовательность значений.

Примеры:

@result: length(@groceries);
@third-element: extract(@groceries, 3);

Обратите внимание: индексация в списках Less начинается с 1, а не с 0, как во многих языках программирования.

range() принимает 2–3 параметра: начальное значение, конечное и необязательный шаг (по умолчанию 1). Пример:

div {
  margin: range(10px, 40px, 10);
}

Компилируется в:

div {
  margin: 10px 20px 30px 40px;
}

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

Построение простого сайта с функциями Less

Ниже — пошаговый пример минимального проекта с Less.

Создайте папку проекта и добавьте два файла: index.htm и style.less.
В index.htm подключите Less (или собирайте через lessc на этапе сборки).

Пример index.htm:




  
  
  
  Document

Важно: без скрипта less в браузере браузер не скомпилирует .less на лету. Для продакшна рекомендуется собирать CSS заранее, а не полагаться на runtime-компиляцию в браузере.

Альтернатива (локальная сборка через npm):

npm install -g less
lessc style.less style.css

Пример содержимого style.less для демо-проекта:

@container-width: 50rem;
@container-bg-color: yellow;

@string: "Hello from the children of planet Earth!";
@pattern: "children of planet Earth!";
@replacement: "inhabitants of Pluto!";

.container{
  width: @container-width;
  background-color: @container-bg-color;
  padding: if(@container-width > 30rem, range(20px, 80px, 20), "");
  border: solid;
}

h1:first-child::after{
  content: replace(@string, @pattern, @replacement);
}

Ожидаемый скомпилированный CSS:

.container {
  width: 50rem;
  background-color: yellow;
  padding: 20px 40px 60px 80px;
  border: solid;
}
h1:first-child::after {
  content: "Hello from the inhabitants of Pluto!";
}

Скриншот готового проекта

Открыв index.htm в браузере, вы увидите контейнер с заданной шириной, фоном и псевдоэлементом h1, содержащим заменённую строку.

Когда функции Less не подходят

Производительность в рантайме: подключение Less в браузере (через CDN) удобно для прототипов, но замедляет загрузку страницы в продакшне. Для продакшна компилируйте .less в .css заранее.
Сложная логика: если вам нужна обширная программа с ветвлениями, циклами и сложными условиями — лучше решать такие задачи на этапе сборки (например, в JavaScript/Node) и генерировать CSS, а не пытаться уместить всю логику в Less.
Совместимость с CSS-переменными: CSS Custom Properties (var(–name)) работают в рантайме и могут быть изменены браузером; Less выполняет подстановку на этапе компиляции. Если вам нужна динамическая реакция на переменные во время выполнения (например, управление темой из JS), используйте CSS-переменные.

Альтернативные подходы

Sass/SCSS: мощный препроцессор с более строгим синтаксисом и широким сообществом. Подходит для больших проектов и сложных архитектур.
PostCSS: плагиновая система, где можно применять разные трансформации (autoprefixer, cssnano, postcss-preset-env). Позволяет гибко настраивать пайплайн.
CSS Custom Properties + build-time tools: сочетание переменных в рантайме и автоматической оптимизации на сборке.

Выбор зависит от команды: если важна скорость разработки и минимальная конфигурация — Less подходит; если нужна строгая типизация/расширенные возможности — рассматривайте Sass; если нужен плагиновый подход — PostCSS.

Шпаргалка: наиболее полезные функции Less (кратко)

if(condition, valueIfTrue, valueIfFalse) — тернарный выбор;
boolean(expr) — возвращает true/false;
replace(string, pattern, replacement, flags) — поиск и замена строк;
length(list) — длина списка;
extract(list, n) — n-й элемент (индексация с 1);
range(start, end [, step]) — генерирует последовательность значений;
mix(color1, color2, weight) — смешивает два цвета;
lighten(color, amount) / darken(color, amount) — регулировка яркости цвета;
percentage(value) — преобразует число в процент (при необходимости).

Используйте эту шпаргалку в качестве быстрого напоминания при написании Less.

Критерии приёмки

Структура проекта: присутствуют index.htm и сгенерированный style.css (если сборка локальная).
Вёрстка отображается корректно в современных браузерах (Chrome, Firefox, Safari, Edge).
Параметризуемые значения (переменные) используются для управления цветами и размерами.
В примере replace() корректно заменяет текст в псевдоэлементе.
Сборка: при использовании lessc команда lessc style.less style.css успешно выполняется.

Чеклист ролей

Разработчик:

Настроить сборку (lessc или интеграция в сборщик).
Проверить, что все переменные документированы.
Избегать подключений Less в продакшн через CDN.

Дизайнер:

Согласовать палитру и размеры, вынести в переменные.
Проверить адаптивность контейнера (@container-width и падинг).

Ревьюер/QA:

Проверить кросс-браузерность.
Убедиться, что скомпилированный CSS не содержит лишних правил и соответствует критериям приёмки.

Совместимость и миграция

Less компилируется в стандартный CSS, поэтому итоговый CSS будет работать во всех браузерах.
При миграции с Less на Sass понадобится переписать синтаксис переменных и некоторых конструкций (Less использует @ для переменных, Sass — $). Миксины и вложенность в целом сопоставимы по идее, но синтаксис отличается.
Для сохранения динамики на клиенте рассмотрите смешение: генерируйте базовый CSS через Less, а динамические параметры (тема, пользовательские настройки) — через CSS-переменные.

Факто-бокс — ключевые моменты

Less выполняется на этапе компиляции (обычно) или может компилироваться в браузере (не рекомендуется для продакшна).
Индексация в списках Less начинается с 1.
Основные полезные функции: if, boolean, replace, length, extract, range.

Пример простого решения проблем (эмпирическое правило)

Если вы хотите быстрее прототипировать дизайн с переменными и простыми условями — используйте Less. Если проект растёт и требуется строгая типизация, сложные вычисления на этапе сборки и большое сообщество — рассмотрите миграцию на Sass или интеграцию PostCSS.

Наглядное дерево решений (Mermaid)

flowchart TD
  A[Нужен препроцессор?] -->|Да| B{Нужны ли сложные возможности?}
  B -->|Нет| C[Less — быстрый старт]
  B -->|Да| D{Нужны ли плагины/постобработка?}
  D -->|Да| E[PostCSS]
  D -->|Нет| F[Sass/SCSS]
  A -->|Нет| G[Оставить обычный CSS + CSS-переменные]

Риски и рекомендации

Риск: подключение Less в браузере увеличивает время загрузки. Рекомендация: компилировать на этапе сборки.
Риск: смешение единиц (px vs rem) в арифметике может давать неожиданные результаты. Рекомендация: стандартизировать единицы в проекте.
Риск: сложная логика в стилях ухудшает читаемость. Рекомендация: выносить сложную генерацию в скрипты сборки.

Краткое резюме

Less расширяет CSS понятиями функций, переменных и списков, что ускоряет разработку и уменьшает дублирование.
Функции if(), boolean(), replace(), range(), length() и extract() покрывают большинство практических задач при создании адаптивных и параметризуемых стилей.
Для продакшна компилируйте Less на этапе сборки и документируйте переменные и конвенции.

Важно: Less — мощный инструмент для быстрой стилизации и прототипирования, но как и любой инструмент, он эффективен при правильном применении и соблюдении практик сборки.