Синтаксис HTML. HTML тэги: парные HTML тэги, одиночные HTML тэги. Что такое HTML тэг?
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел…
Пространство имен в LESS. Аксессоры в LESS
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я продолжаю рубрику: Верстка сайтов и ее раздел Препроцессор LESS. Мы уже довольно много говорим о возможностях LESS и потихоньку начинаем переходить к более интересным и сложным возможностям данного препроцессора. В данной записи мы поговорим про пространство имен и аксессоры в LESS. В любом языке программирования есть понятие пространства имен, но этого нет в CSS.
Пространство имен в LESS. Аксессоры в LESS
Данная запись поможет вам разобраться с тем, как помогают аксессоры LESS автоматизировать написание CSS кода и поймете для чего в LESS используется понятие пространства имен. Из этой записи вы узнаете: о назначении аксессоров LESS и том, как они связаны с пространством имен. Попробуете поработать с аксессорами на примере и в завершении записи увидите результаты работы аксессоров LESS в браузере.
Содержание статьи:
Назначение аксессоров в LESS и их связь с пространством имен
CSS препроцессор LESS имеет еще одну фишку, которая позволяет нам сказать, что LESS расширяет возможности CSS. Но, дело всё в том, что про пространство имен в LESS и про аксессоры в LESS (accessor) лучше бы было поговорить после переменных LESS и LESS миксин. Но, как есть, так есть, в этой записи мы будем говорить про пространство имен и аксессоры в LESS. А пользоваться полученными знаниями будем, когда начнем рассматривать вышеупомянутые возможности.
Кстати, аксессоры мы можем использовать вместе с вложенными директивами и внутри вложенных правил LESS. Аксессоры нужны для того, чтобы сделать ссылку для компилятора LESS на какое-либо свойство или LESS переменную.
Часто бывает так, что примеси в LESS имеют многоуровневую вложенность и, чтобы сослаться на примесь, имеющую самый глубокий уровень, нам нужно указать все имена верхних примесей: таким образом мы группируем примеси в LESS и создаем пространство имен или Namespace.
Аксессоры и пространство имен в LESS очень тесно связаны, поэтому давайте разберемся с тем, как связаны аксессоры, примеси и пространства имен в LESS на примерах.
Пример с использование аксессоров в LESS и их связь с примесями и пространством имен
В примере давайте попробуем изменить размер текста внутри HTML параграфа, воспользовавшись аксессорами и понятием о пространстве имен. Создадим простой HTML документ в папке nodejs. Платформу Node.js мы установили, когда рассматривали установку LESS на Windows, данная платформа нужна для работы LESS компилятора:
[php]
<html lang="ru-RU">
<head>
<metacharset="UTF-8">
<title>Пространство имен и аксессоры в LESS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Пример использования аксессоров в LESS</h1>
<p class="myclass">В примере мы будем изменять размер этого текста.</p>
</body>
</html>
[/php]
Мы создали простую HTML страницу, состоящая из одного параграфа и HTML заголовка. При помощи HTML тэга<meta> (специальный мета-тэг) мы указали кодировку HTML документа, чтобы символы на страницы отображались корректно и задали HTML атрибут lang, в котором указали язык документа.
А теперь давайте напишем LESS код, в котором будем использовать аксессоры:
[php]
.class1 {
.class2 {
.val (@par) {
font-size: @par;
color:red;
}
}
}
.myclass {
.class1 > .class2 > .val (20px);
}
[/php]
На первый взгляд код сложный, но присмотритесь внимательней и вы поймете, что CSS класс .myclass наследует все стили от класса .val, размер текста для класса .val зависит от параметра, который мы ему передаем (на самом деле .val это не класс, чуть позже вы узнаете, что это). Аксессор LESS– это знак больше, который указывает к какому пространству имен принадлежит примесь или класс.
А теперь давайте сконвертируем LESS в CSS, командной строке наберите:
[php]
lessc style.less style.css
[/php]
Мы получим вот такой CSS код:
[php]
.myclass {
font-size: 20px;
color: red;
}
[/php]
CSS код получился короче, чем LESS, как и в примере с встроенными LESS функциями. Но нужно понимать, что таблицы стилей – это тысячи строк кода, причем, на странице в браузере зачастую много одинаковых HTML элементов, раз они одинаковые, то и оформление для них одинаковое, соответственно CSS код дублируется. Не проще ли сделать так, чтобы код не дублировался, а наследовался от одного HTML элемента к другому?
Результаты использования пространства имен и аксессоров в LESS
Давайте теперь посмотрим на полученный эффект от работы аксессоров в браузере:
Результаты использования пространства имен и аксессоров в LESS в браузере
Давайте подведем итого по использованию аксессоров и назначению пространства имен в LESS: понятие пространства имен в LESS позволяет нам сократить CSS код за счет того, что на странице существует множество элементов с одинаковым оформлением, и вместо того, чтобы дублировать код, мы «наследуем» код при помощи аксессоров.
Выберете удобный для себя способ, чтобы оставить комментарий