Что такое Less

Less — это препроцессор CSS: программа, которая читает стили на расширенном языке и превращает их в обычный CSS. Вы пишете переменные, вложенные правила и миксины, а браузер получает готовые правила без них. Такое превращение называется компиляцией.

Курс использует Less 4 (версии 4.x) — текущую основную версию. Компилятор написан на JavaScript и устанавливается как пакет npm less.

От Less к CSS

Вот небольшой файл Less. Он хранит фирменный цвет в переменной и вкладывает состояние наведения внутрь правила кнопки:

// styles/main.less
@primary: #2563eb;
 
.btn {
  padding: 8px 16px;
  color: white;
  background: @primary;
 
  &:hover {
    background: black;
  }
}

Что получает браузер после компиляции:

.btn {
  padding: 8px 16px;
  color: white;
  background: #2563eb;
}
.btn:hover {
  background: black;
}

Переменной больше нет — подставлено её значение, а вложенное правило стало отдельным правилом .btn:hover. Результат работает в любом браузере:

<style>
  .btn {
    padding: 8px 16px;
    color: white;
    background: #2563eb;
  }
  .btn:hover {
    background: black;
  }
</style>
 
<button class="btn">Записаться</button>

Наведите указатель на кнопку — фон станет чёрным.

Less и Sass

Less и Sass решают одну задачу и внешне похожи. Главные отличия в записи:

Любой правильный CSS — это и правильный Less, поэтому style.css можно переименовать в style.less и добавлять возможности постепенно.

Где Less используют сегодня

Для новых проектов чаще выбирают Sass или обычный CSS с пользовательскими свойствами. Но Less по-прежнему встречается:

• Bootstrap 3 — его исходники написаны на Less, а на нём до сих пор работают многие сайты;
• Ant Design до версии 4 — темы настраивались переменными Less;
• Magento 2 — темы интернет-магазинов собираются из Less;
• Semantic UI и Fomantic UI — темы тоже на Less;
• старые корпоративные проекты и админки.

Поэтому Less нужно уметь читать и поддерживать, а в конце курса показано, как перевести его на Sass или обычный CSS.

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

Браузер не понимает Less. Ссылка на исходный файл ничего не даёт:

<link rel="stylesheet" href="styles/main.less">
<p>Стили не применились.</p>

Подключайте всегда скомпилированный файл .css. Как его получить, показано в следующем уроке.