Непосредственное форматирование текста в HTML
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел…
Привет, посетитель сайта 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 документ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!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> |
Интерпретировав данный HTML код, браузер создаст простую HTML страницу с двумя HTML элементами. Давайте теперь немного оформим данную страницу при помощи вложенных директив LESS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.myclass { @media screen { color: yellow; @media (min-width: 1024px) { color: orange; } } @media mytext { color: black; } } |
Этот код, как и HTML страницу нам нужно сохранить в папку nodejs, об этом мы говорили, когда устанавливали компилятор LESS на Windows. Теперь осталось выполнить команду:
1 |
lessc style.less style.css |
Компилятор LESS конвертирует код LESS в CSS, и мы получим вот такую таблицу стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@media screen { .directive { color: yellow; } } @media screen and (min-width: 1024px) { .directive { color: orange; } } @media mytext and (min-width: 800px) { .directive { color: black; } } |
На самом деле сейчас мы создали адаптивный HTML макет: текст внутри HTML тэга <p> будет менять свой цвет. Если область просмотра больше 1024px, то текст внутри параграфа будет оранжевый:
Результат работы вложенных директив LESS
Когда область просмотра станет меньше 1024px, текст будет желтым:
Результат работы вложенных директив LESS
Мы видим, что при помощи вложенных директив LESS мы можем создавать адаптивные HTML макеты очень быстро и при этом код, который мы напишем будет меньше по объему, чем CSS код и будет иметь четкую иерархию.
Выберете удобный для себя способ, чтобы оставить комментарий