Less

Об инструменте

Что такое Less

Less – динамический язык стилей, который работает на CSS и JavaScript. Язык является надстройкой над CSS – любой код на CSS будет работать в Less, но не наоборот. Less является препроцессором, который генерирует CSS так же, как PHP способен генерировать HTML. Less можно подключить к странице как сторонний код JavaScript, также его можно компилировать в чистый CSS. Less может работать как на клиентской стороне, так и на стороне веб-сервера с поддержкой JavaScript, например, на базе Node.js.

Возможности, которыми Less дополняет CSS:

переменные – позволяют хранить правила CSS в качестве значения и применять значения, вызывая переменную по имени, а также динамически переопределять правила CSS во всех местах вызова переменной;
вложенные блоки – позволяют делать вложенные стили более читаемыми в сравнении с каскадными правилами применения стилей;
миксины – примеси, которые позволяют дополнять уже имеющиеся стили дополнительными значениями и переиспользовать дополнительные значения;
операторы – позволяют указывать условия для выполнения стилей благодаря использованию условных конструкций;
функции – позволяют удобно оперировать с насыщенностью, прозрачностью, тоном цвета, а также смешивать цвета.

Less делает работу со стилями более удобной. К примеру, разработчик может сделать цвет кнопки на сайте светлее на тон, просто сложив одно значение HEX c другим. Если разработчику захочется поменять цвет, не затрагивая при этом оттенки, он может изменить его в переменной, а не переписывать каждый оттенок вручную, как это делается в CSS. Также Less делает код более читаемым, выступая синтаксическим сахаром для обычного CSS.

Less поддерживает установку пакетов-расширений, которые находятся в npm – репозитории JavaScript-пакетов для среды выполнения кода Node.js. Для использования дополнительных пакетов понадобится настроить Node.js, поскольку браузеры не поддерживают сборку пакетов, которые по большей части состоят из нескольких файлов.