Вложенные директивы в LESS

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

Вложенные директивы в LESS

Вложенные директивы в LESS

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


Особенности работы вложенных директив в LESS

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

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

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

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

Интерпретировав данный HTML код, браузер создаст простую HTML страницу с двумя HTML элементами. Давайте теперь немного оформим данную страницу при помощи вложенных директив LESS:

Этот код, как и HTML страницу нам нужно сохранить в папку nodejs, об этом мы говорили, когда устанавливали компилятор LESS на Windows. Теперь осталось выполнить команду:

Компилятор LESS конвертирует код LESS в CSS, и мы получим вот такую таблицу стилей:

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

На самом деле сейчас мы создали адаптивный HTML макет: текст внутри HTML тэга <p> будет менять свой цвет. Если область просмотра больше 1024px, то текст внутри параграфа будет оранжевый:

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

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

Когда область просмотра станет меньше 1024px, текст будет желтым:

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

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

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

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