Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я продолжаю рубрику: Верстка сайтов и ее раздел Препроцессор LESS. Препроцессор LESS расширяет возможности CSS и одной из базовых функций по расширению являются вложенные директивы, если вы не знаете, что такое директивы в CSS, то рекомендую сперва ознакомиться с этой темой, а уже потом переходить к рассмотрению вложенных директив в LESS. LESS позволяет обращаться с CSS директивами, так, будто это CSS свойства.
Вложенные директивы в LESS
В этой записи мы познакомимся с использованием вложенных директив в LESS и узнаем, какие преимущества дают вложенные директивы. Разбираться с вложенными директивами мы будем, конечно, на простом примере. А в завершении данной записи вы сможете посмотреть результат работы вложенных директив в LESS.
Содержание статьи:
CSS препроцессор LESS, как и CSS поддерживает директивы. Мы уже неоднократно говорили о том, что LESS расширяет возможности CSS, и директивы в LESS – не исключение. LESS расширяет возможности использования CSS директив, делая их вложенными. Вложенные директивы в LESS не только сокращают объем кода, который нужно написать, но, как и вложенные правила LESS, вложенные директивы делают код структурированным.
Помните пример с вложенными селекторами? Когда мы видели, что компилятор LESS обращался с CSS селекторами так, как будто это CSS свойства других селекторов. То же самое мы наблюдаем и с директивами LESS. У нас сейчас нет цели изучать CSS и, надеюсь, вы знаете всё про CSS директивы, поэтому мы лучше перейдем к примерам использования CSS директив в LESS.
Давайте рассмотрим один простой пример вложенных директив LESS, который поможет разобраться с тем, как они работают. Для начала создадим простой HTML документ:
[php]
<!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>
[/php]
Интерпретировав данный HTML код, браузер создаст простую HTML страницу с двумя HTML элементами. Давайте теперь немного оформим данную страницу при помощи вложенных директив LESS:
[php]
.myclass {
@media screen {
color: yellow;
@media (min-width: 1024px) {
color: orange;
}
}
@media mytext {
color: black;
}
}
[/php]
Этот код, как и HTML страницу нам нужно сохранить в папку nodejs, об этом мы говорили, когда устанавливали компилятор LESS на Windows. Теперь осталось выполнить команду:
[php]
lessc style.less style.css
[/php]
Компилятор LESS конвертирует код LESS в CSS, и мы получим вот такую таблицу стилей:
[php]
@media screen {
.directive {
color: yellow;
}
}
@media screen and (min-width: 1024px) {
.directive {
color: orange;
}
}
@media mytext and (min-width: 800px) {
.directive {
color: black;
}
}
[/php]
На самом деле сейчас мы создали адаптивный HTML макет: текст внутри HTML тэга <p> будет менять свой цвет. Если область просмотра больше 1024px, то текст внутри параграфа будет оранжевый:
Результат работы вложенных директив LESS
Когда область просмотра станет меньше 1024px, текст будет желтым:
Результат работы вложенных директив LESS
Мы видим, что при помощи вложенных директив LESS мы можем создавать адаптивные HTML макеты очень быстро и при этом код, который мы напишем будет меньше по объему, чем CSS код и будет иметь четкую иерархию.
Выберете удобный для себя способ, чтобы оставить комментарий