CSS селекторы. Группировка CSS
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Я продолжаю рубрику…
Вложенные правила в LESS
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов и ее раздел Препроцессор LESS. HTML код имеет строгую иерархию, разметка HTML документа описывает HTML элементы страницы и позволяет описать иерархию элементов или иначе их вложенность. К сожалению CSS стили не обладают иерархией и их написание не требует от разработчика описывать иерархию вложенности, поэтому код CSS не всегда удобно редактировать с этой точки зрения.
Вложенные правила в LESS
Препроцессор LESS элегантно решает проблему иерархии элементов на странице при помощи вложенных правил. Вложенные правила в LESS не столько сокращают CSS код, сколько структурируют его. В этой записи мы попробуем поработать с вложенными правилами LESS и поговорим о том, что собой представляют вложенные правила, естественно, будет и пример использования вложенных правил LESS.
Содержание статьи:
Для чего нужны вложенные правила в LESS и чем они облегчают написание CSS кода
CSS препроцессор LESS позволяет использовать вложенные правила. Вложенные правила в LESS используются для минимизации CSS кода, а так же позволяют наследовать одним CSS селекторам стили других CSS селекторов. Помимо того, что вложенные правила LESS позволяют наследовать стили одного CSS класса другим, они еще и позволяют использовать имя класса, как свойство для другого класса.
Вложенные правила в LESS могут хранить несколько значений и повторно использоваться в коде сколько вам угодно раз. Думаю, слов достаточно, и мы можем переходить к примеру использования вложенных правил в LESS.
Пример использования вложенных правил в LESS.
Когда мы разбирались установкой LESS компилятора на Windows, мы установили Node.js, который необходим для работы LESS. Теперь нам нужно создать HTML страницу и сохранить его в папке nodejs.
[php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Вложенные правила в LESS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="content">
<h1>Первый заголовок</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quasi sunt molestias non suscipit ab accusantium totam necessitatibus aliquam in ex impedit quis neque deleniti ullam repudiandae eveniet, et quisquam.</p>
<div class="main">
<h1>Второй заголовок</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, quibusdam, dolores! Fugit aperiam, dolores alias tempore, a consequatur dolorem, illo quis rerum quaerat totam. Vel non recusandae magni, eveniet ipsa.</p>
</div>
</div>
</body>
</html>
[/php]
Этот документ мы сохраним с именем index.html в папке nodejs. Как видите, структура HTML документа простая: здесь указан язык, используемый в HTML документе; есть HTML декларация, которая говорит браузеру, что это HTML 5; есть название HTML документа в тэге <title>. Тело HTML документа имеет два HTML блока <div> c HTML атрибутами class, два HTML заголовка <h1> и два HTML параграфа <p>.
И теперь давайте зададим несколько стилей через LESS файл и скомпилируем его, чтобы посмотреть, как работают вложенные селекторы в LESS:
[php]
.content{
h1{
font-size: 14px;
color: orange;
}
p{
font-size: 30px;
color:blue;
}
.main{
h1{
font-size: 14px;
color:orange;
}
p{
font-size: 30px;
color:blue;
}
}
}
[/php]
Обратите внимание на фигурные скобки по ним прослеживается четкая иерархия содержимого HTML документа, сразу видно, что блок main лежит внутри блока content, а внутри блока main есть h1 и p. Это первое. Теперь скомпилируйте LESS код в CSS командой:
[php]
lessc style.less style.css
[/php]
На выходе вы получите таблицу стилей с именем style.css и следующим содержимым:
[php]
.content h1 {
font-size: 14px;
color: orange;
}
.content p {
font-size: 30px;
color: blue;
}
.content .main h1 {
font-size: 14px;
color: orange;
}
.content .main p {
font-size: 30px;
color: blue;
}
[/php]
Обратите внимание: код CSS несколько более объемен, чем тот код, что мы написали в LESS файле. Два вывода о вложенных правилах LESS:
- Вложенные правила LESS делают код короче.
- Вложенные правила LESS дают возможность писать иерархические стили, соблюдая иерархию HTML документа.
Результаты работы вложенных правил в LESS
Результат работы вложенных правил LESS вы можете увидеть, открыв файл index.html в браузере, если вы сделали все, как в примере, то браузер покажет вам такую же картинку, как вы видите ниже.
Результат работы вложенных правил LESS
Мы разобрались с вложенными правилами LESS и увидели, что вложенные правила сокращают объем написанного кода и создают иерархию CSS селекторов по аналогии с HTML кодом, тем самым LESS расширяет возможности CSS.
Вложенные правила, вложенные директивы, функции и прочие фишки в LESS и других препроцессорах — это, конечно, хорошо, но на мой взгляд все эти пляски вокруг компиляторов, интерпретаторов и усложнения логики не стоят тех преимуществ, что дают, скажем, вложенные правила.
А для ускорения кодирования нужно правильные редакторы использовать, сниппеты и автодополнение. Что действительно хорошо в LESS так это не вложенные правила, а переменные. Правда и их можно редактором заменить, воспользовавшись поиском и заменой в редакторе.
Ниндзя, на вкус и цвет фламастеры разные, кому-то проще написать код LESS и использовать его фишки: вложенные правила, директивы, переменные, функции, миксины и прочее. Кому-то наоброт: проще сделать заготовки в виде сниппетов и прикрутить эммет. А кто-то использует преимущества LESS вместе с преимуществами редактора. Отчасти я разделяю вашу точку зрения, но многим действительно покажется удобным использовать вложенные правила или другие фишки LESS.