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

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

Вложенные правила в LESS

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

Для чего нужны вложенные правила в LESS и чем они облегчают написание CSS кода

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

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

Пример использования вложенных правил в LESS.

Когда мы разбирались установкой LESS компилятора на Windows, мы установили Node.js, который необходим для работы LESS. Теперь нам нужно создать HTML страницу и сохранить его в папке nodejs.

Этот документ мы сохраним с именем index.html в папке nodejs. Как видите, структура HTML документа простая: здесь указан язык, используемый в HTML документе; есть HTML декларация, которая говорит браузеру, что это HTML 5; есть название HTML документа в тэге <title>. Тело HTML документа имеет два HTML блока <div> c HTML атрибутами class, два HTML заголовка <h1> и два HTML параграфа <p>.

И теперь давайте зададим несколько стилей через LESS файл и скомпилируем его, чтобы посмотреть, как работают вложенные селекторы в LESS:

Обратите внимание на фигурные скобки по ним прослеживается четкая иерархия содержимого HTML документа, сразу видно, что блок main лежит внутри блока content, а внутри блока main есть h1 и p. Это первое. Теперь скомпилируйте LESS код в CSS командой:

На выходе вы получите таблицу стилей с именем style.css и следующим содержимым:

Обратите внимание: код CSS несколько более объемен, чем тот код, что мы написали в LESS файле. Два вывода о вложенных правилах LESS:

1. Вложенные правила LESS делают код короче.
2. Вложенные правила LESS дают возможность писать иерархические стили, соблюдая иерархию HTML документа.

Результаты работы вложенных правил в LESS

Результат работы вложенных правил LESS вы можете увидеть, открыв файл index.html в браузере, если вы сделали все, как в примере, то браузер покажет вам такую же картинку, как вы видите ниже.

Результат работы вложенных правил LESS

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