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

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

В этой записи мы познакомимся с использованием вложенных директив в LESS и узнаем, какие преимущества дают вложенные директивы. Разбираться с вложенными директивами мы будем, конечно, на простом примере. А в завершении данной записи вы сможете посмотреть результат работы вложенных директив в 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 документ:

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<title>Пример вложенных директив в LESS</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

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

<p class="directive">Цвет будет меняться в зависимости от

ширины области просмотра.</p>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Пример вложенных директив в LESS</title>

</head>

<body>

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

<p class="directive">Цвет будет меняться в зависимости от

ширины области просмотра.</p>

</body>

</html>

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

.myclass {

@media screen {

color: yellow;

@media (min-width: 1024px) {

color: orange;

}

}

@media mytext {

color: black;

}

}

.myclass {

@media screen {

color: yellow;

@media (min-width: 1024px) {

color: orange;

}

@media mytext {

color: black;

}

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

lessc style.less style.css

1	lessc style.less style.css

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

@media screen {

.directive {

color: yellow;

}

}

@media screen and (min-width: 1024px) {

.directive {

color: orange;

}

}

@media mytext and (min-width: 800px) {

.directive {

color: black;

}

}

@media screen {

.directive {

color: yellow;

}

@media screen and (min-width: 1024px) {

.directive {

color: orange;

}

@media mytext and (min-width: 800px) {

.directive {

color: black;

}

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

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

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

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

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

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