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

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

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

Вложенные правила в 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

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

2 комментария к записи Вложенные правила в LESS

Ниндзя

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

А для ускорения кодирования нужно правильные редакторы использовать, сниппеты и автодополнение. Что действительно хорошо в LESS так это не вложенные правила, а переменные. Правда и их можно редактором заменить, воспользовавшись поиском и заменой в редакторе.

Кирилл

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

Текст комментария: