LESS

LESS (Leaner Style Sheets — компактные таблицы стилей) — динамический язык стилей, разработанный в 2009 году программистом Алексисом Селье.

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

LESS — это свободное ПО с открытым исходным кодом, распространяемое по лицензии Apache License 2. Первая версия LESS была реализована на языке Ruby, последующие — на JavaScript. За счет синтаксиса, основанного на CSS, этот язык отличается низким порогом вхождения.

Что такое LESS

Основным языком стилей, используемым в веб-разработке, является CSS. Его популярность обусловлена простотой и универсальностью применения, однако ограничения снижают его удобство в некоторых ситуациях — например, если веб-документ простой и в нем часто используется один и тот же цвет или шрифт. Изменить их значения разом нельзя, придется это делать вручную во многих фрагментах документа. Другой важный недостаток CSS — отсутствие вложенности, из-за чего написанный на этом языке код визуально сложен для восприятия. И если разобраться в небольшом фрагменте разработчику не составит особого труда, то при работе с большими массивами могут возникнуть проблемы.  

Эти ограничения CSS — сознательное решение разработчиков языка, цель которых заключается в максимально быстрой загрузке стилей веб-страницы браузером. Добавление дополнительных возможностей увеличивало бы время обработки таблиц браузером, что негативно сказалось бы на быстродействии. 

Для преодоления этих ограничений и был разработан LESS, а также его аналоги, такие как SASS или Stylus. Для их определения используются следующие понятия:

• Метаязык — то есть язык, используемый для описания другого языка более низкого уровня (в данном случае CSS);
• Препроцессор — программная надстройка, вырабатывающая данные, которые уже будут использоваться непосредственно самим CSS-обработчиком веб-браузера.

Например, чтобы присвоить фрагменту веб-страницы темно-персиковый цвет с помощью CSS, нужно прописать в соответствующем элементе код #FF9F94. Проблема в том, что если таких фрагментов много, то нужно это делать в каждом из них вручную. В LESS это можно сделать гораздо проще, указав данный код как значение переменной, которая уже автоматически присвоит нужный цвет соответствующим фрагментам веб-страницы. 

Иными словами, задача LESS как препроцессора CSS — упростить задачу разработчика, предоставив ему более понятные, функциональные и удобные синтаксические конструкции, чем те, которые имеются в самом CSS. Человек пишет на LESS код так, как удобно ему, затем компилятор языка преобразует его в CSS-код, который уже понятен браузеру. Кроме того, с помощью этого языка решаются следующие задачи:

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

Возможности LESS

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

Переменные. В языке LESS они представляют собой то же самое, что и в других языках программирования — области физической или виртуальной памяти, которым можно присваивать определенные значения. Используются они аналогичным образом: вместо того чтобы каждый раз прописывать определенные значения в коде вручную, достаточно указать их заранее в переменной и применять ее в нужных фрагментах. Таким образом можно быстро настроить цвет, шрифт и другие атрибуты форматирования веб-документа. 

Вложения. Чистый CSS поддерживает каскадирование, но не вложенность селекторов (выражений, сообщающих браузеру, к каким фрагментам HTML присвоить то или иное свойство CSS). Из-за этого CSS-код большого веб-документа выглядит громоздким, что усложняет как его написание, так и последующее тестирование и обработку. В LESS это ограничение можно обойти, вложив один селектор в другой. Таким образом, наследование между фрагментами CSS становится более понятным, а сам код — более коротким. 

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

Преимущества LESS

У LESS имеется множество преимуществ как перед самим CSS, так и перед другими CSS-препроцессорами вроде того же SASS:

Быстрая компиляция. Чтобы код, написанный на LESS, был понятен браузеру, он должен быть предварительно превращен в традиционный CSS. Для этого в языке есть встроенный компилятор, при этом он работает значительно быстрее, чем у аналогичных препроцессоров. В отличие от CSS, в котором действуют статичные правила, LESS представляет собой динамический язык стилей. Это значит, что он позволяет определять тип данных и компилировать их непосредственно «на лету», то есть по ходу обработки кода.  

Простота. За счет использования вложенности селекторов код, написанный на LESS, воспринимается гораздо проще, чем CSS. Это облегчает как его написание, так и последующую проверку на ошибки. Кроме того, с помощью наследования и повторного использования стилей можно существенно сократить размер кода. 

Ускорение разработки. Благодаря переменным в LESS присваивать повторяющиеся значения различным фрагментам кода значительно проще, чем прописывать каждое вручную. Соответственно, и вносить изменения в уже написанный код становится легче. 

Низкий порог вхождения. Если разработчик хорошо знаком с традиционным CSS, освоение LESS не вызовет у него больших проблем. Это достигается за счет схожего синтаксиса обоих языков. 

Возможность подключения плагинов. Так как LESS является открытым ПО, ведущий и сторонние разработчики постоянно дополняют его основной функционал различными плагинами. Их можно скачать как с официального сайта, так и с независимых репозиториев. Кроме того, открытый характер этого языка делает более доступным его изучение за счет наличия большого числа руководств и форумов, в которых разработчик может получить помощь. 

Недостатки LESS

Несмотря на широкую популярность, этот язык разметки стилей имеет и свои недостатки. Причем многие программисты из-за них отказываются от его использования в пользу более раннего препроцессора SASS, который в значительной мере повлиял на сам LESS. К наиболее значимым недостаткам относятся:

• Необходимость хорошо знать CSS, так как на нем основан синтаксис LESS. Впрочем, изучение обоих языков может происходить параллельно, поэтому для опытных программистов это большой проблемы не составляет. 
• LESS более чувствителен к ошибкам, поэтому даже опытному разработчику придется тестировать код после его написания. При этом встроенные инструменты отладки и поиска ошибок не всегда работают должным образом.
• LESS уступает некоторым другим препроцессорам CSS (в первую очередь, SASS) по количеству фреймворков, а также по количеству встроенных возможностей, что частично компенсируется подключением плагинов. 

Способы подключения LESS

На стороне клиента. Это наиболее простой в плане реализации способ установки LESS, так как он задействует непосредственно браузер пользователя с помощью скрипта JavaScript. Для этого нужно:

• подключить файл *.less к веб-документу с помощью тега <link>;
• скачать скрипт или получить на официальном сайте LESS ссылку на сеть доставки контента (CDN).

При этом компиляция LESS в CSS будет происходить «на лету» в веб-браузере пользователя. Этот способ наиболее простой, но чаще используется в небольших веб-документах, так как их обработка не занимает много времени. Также он применяется на стадиях разработки и отладки проекта, когда результат компиляции важнее ее скорости. 

На стороне сервера.  В этом случае для работы с LESS-файлами понадобится установить платформу Node.js, которая расширяет узкоспециализированный JavaScript до языка общего назначения. Также необходимо предварительно скачать less-пакет с помощью менеджера пакетов npm. Далее с помощью Node.js LESS-файл компилируется в CSS, который подключается непосредственно к HTML-документу. Данный способ может показаться более сложным, зато он дает больше возможностей и, кроме того, позволяет не компилировать CSS-файл каждый раз при загрузке страницы, тем самым ускоряя ее. 

С помощью сторонних компиляторов. Для разных операционных систем существуют различные платформы-компиляторы, с помощью которых можно создавать и подключать LESS-файлы к веб-документу. Например, для ОС Microsoft Windows это Winless, а для MacOS — LESS.app. Такие приложения не просто компилируют LESS-файл в CSS, но и автоматизируют многие операции при создании самого кода. 

Различия между LESS и другими CSS-препроцессорами

Наиболее распространенными аналогами LESS являются два препроцессора — SASS и Stylus. SASS был разработан раньше, в 2007 году, и точно так же, как и первая версия LESS, написан на Ruby. Его преимущество заключается в более широком встроенном функционале, который можно дополнительно расширить с помощью подключаемой библиотеки Compass. Сам SASS бывает двух типов:

• Непосредственно SASS, использующий устаревший синтаксис;
• SCSS, синтаксис которого имеет много сходств с традиционным CSS.

Другой популярный препроцессор Stylus был разработан позже, в 2010 году, сразу на JavaScript (LESS перешел на JS только начиная со второй версии). Хотя на данный момент он менее популярен по сравнению со своими более старшими собратьями, специалисты считают его перспективным благодаря его максимальной простоте и удобству. В частности, в его синтаксисе, в целом похожем на CSS, отсутствуют характерные фигурные скобки и прочие знаки препинания. 

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

LESS — удобный язык для работы со стилями, пользующийся заслуженной популярностью среди разработчиков за счет своей простоты и низкого порога вхождения, достаточно широкого арсенала средств создания, отладки и компиляции кода. Поэтому он часто рекомендуется как эффективный инструмент верстки веб-документов, пригодный для работы как с небольшими, так и с крупными проектами. Кроме того, совместимость его синтаксиса с традиционным CSS существенно упрощает освоение LESS. Тем не менее, при реализации некоторых крупных проектов его функционала может не хватить, но всегда есть возможность подключить дополнительные расширения.