Препроцессор CSS LESS. Изучаем LESS чтобы ускорить версктку сайта и веб-страниц.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов и ее раздел Препроцессор LESS. В этой записи мы поговорим о функциях LESS, которые расширяют возможности CSS, так же вы узнаете о минусах LESS перед обычным CSS. В общем, данная публикация предназначена для тех, кто еще не решил о том, что ему использовать: препроцессор LESS или чистый CSS.

Расширение возможностей CSS с LESS

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

Минусы LESS при расширении возможностей CSS

CSS препроцессор LESS расширяет возможности CSS и создает дополнительный уровень абстракции для оформления HTML документов. Сам по себе язык CSS является абстрактным и позволяет задавать стили для HTML элементов, отбирая их из DOM при помощи селекторов. Ранее мы установили компилятор LESS на Windows для этого нам потребовалась платформа Node.js. По сути, установив Node.js, мы усложнили себе жизнь и добавили лишнее звено в цепочки разработки сайта, которых и без того много.

Мы уже говорили про преимущества и недостатки LESS в записи: «Что такое LESS?». Давайте акцентируем внимание на очевидных недостатках:

1. Для работы с LESS нам необходимо установить компилятор LESS, а это значит, что нужно установить Node.js и работать через командную строку, либо установить десктопный компилятор с графическим интерфейсом.
2. Синтаксис LESS и его возможности еще нужно изучить, прежде чем получить от этого выгоду.
3. А если вы на сайте используете компиляцию LESS на лету, то у некоторых пользователей стили вовсе не будут отображаться, так как не все заходят на ваш сайт с включенным JavaScript и не все браузеры способны интерпретировать JavaScript код.
4. Когда вы начнете делать валидацию HTML шаблона и найдете ошибки, вам придется разбираться не только с CSS файлами, но и с LESS, что не дает дополнительных поводов для радости.

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

Как LESS расширяет возможности CSS

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

1. Переменные в LESS. Переменные в LESS очень помогают в написание CSS кода тогда, когда у вас есть много свойств с повторяющимся значением, тогда вы можете объявить переменную, присвоить ей значение и уже вместо того, чтобы писать значение свойства, вы указываете переменную. Это очень удобно, когда нужно подправить значение свойства: вы просто меняете значение переменной.
2. Примеси или миксины в LESS. Примеси в LESS являются аналогом функций в языках программирования. Другими словами: примеси в LESS позволяют использовать CSS код или часть CSS кода повторно для разных селекторов, таким образом код как бы подмешивается или смешивается.
3. Вложенные правила в LESS. Вложенные правила в LESS как раз-таки уменьшают и структурируют CSS код.
4. Вложенные директивы в LESS. Директивы CSS в LESS могут быть вложенными, в дальнейшем мы посмотрим, что это уменьшит CSS код на несколько строк и избавит нас от повторений.
5. Математические операции в LESS. LESS позволяет выполнять математические операции. Неплохое расширение возможностей CSS.
6. Escapingв LESS. Эта штука вносит динамику в CSS код, позволяя «генерировать» различные CSS хуки.
7. В LESS есть набор различных функций для работы с всевозможными CSS значениями.
8. Как и в языках программирования, в LESS есть область видимости. Если в LESS есть область, то есть глобальные и локальные переменные.
9. В LESS есть пространства имен, которые используются для группировки правил, сгруппировав правила, вы можете их легко добавлять к другим элементам ваших страниц.
10. LESS расширяет CSS даже в возможности написания комментариев, если вы помните, то CSS не поддерживает строчные комментарии, а вот в LESS они есть, но при компиляции LESS в CSS строчные комментарии будут удалены.

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