Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов и ее раздел Препроцессор LESS. HTML код имеет строгую иерархию, разметка HTML документа описывает HTML элементы страницы и позволяет описать иерархию элементов или иначе их вложенность. К сожалению CSS стили не обладают иерархией и их написание не требует от разработчика описывать иерархию вложенности, поэтому код CSS не всегда удобно редактировать с этой точки зрения.
Вложенные правила в LESS
Препроцессор LESS элегантно решает проблему иерархии элементов на странице при помощи вложенных правил. Вложенные правила в LESS не столько сокращают CSS код, сколько структурируют его. В этой записи мы попробуем поработать с вложенными правилами LESS и поговорим о том, что собой представляют вложенные правила, естественно, будет и пример использования вложенных правил LESS.
Содержание статьи:
CSS препроцессор LESS позволяет использовать вложенные правила. Вложенные правила в LESS используются для минимизации CSS кода, а так же позволяют наследовать одним CSS селекторам стили других CSS селекторов. Помимо того, что вложенные правила LESS позволяют наследовать стили одного CSS класса другим, они еще и позволяют использовать имя класса, как свойство для другого класса.
Вложенные правила в LESS могут хранить несколько значений и повторно использоваться в коде сколько вам угодно раз. Думаю, слов достаточно, и мы можем переходить к примеру использования вложенных правил в LESS.
Когда мы разбирались установкой LESS компилятора на Windows, мы установили Node.js, который необходим для работы LESS. Теперь нам нужно создать HTML страницу и сохранить его в папке nodejs.
|
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 30 31 32 33 34 35 |
<!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> |
Этот документ мы сохраним с именем index.html в папке nodejs. Как видите, структура HTML документа простая: здесь указан язык, используемый в HTML документе; есть HTML декларация, которая говорит браузеру, что это HTML 5; есть название HTML документа в тэге <title>. Тело HTML документа имеет два HTML блока <div> c HTML атрибутами class, два HTML заголовка <h1> и два HTML параграфа <p>.
И теперь давайте зададим несколько стилей через LESS файл и скомпилируем его, чтобы посмотреть, как работают вложенные селекторы в LESS:
|
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 30 31 32 33 34 35 36 37 38 39 40 41 |
.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; } } } |
Обратите внимание на фигурные скобки по ним прослеживается четкая иерархия содержимого HTML документа, сразу видно, что блок main лежит внутри блока content, а внутри блока main есть h1 и p. Это первое. Теперь скомпилируйте LESS код в CSS командой:
|
1 |
lessc style.less style.css |
На выходе вы получите таблицу стилей с именем style.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 30 31 |
.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; } |
Обратите внимание: код CSS несколько более объемен, чем тот код, что мы написали в LESS файле. Два вывода о вложенных правилах LESS:
Результат работы вложенных правил LESS вы можете увидеть, открыв файл index.html в браузере, если вы сделали все, как в примере, то браузер покажет вам такую же картинку, как вы видите ниже.
Результат работы вложенных правил LESS
Мы разобрались с вложенными правилами LESS и увидели, что вложенные правила сокращают объем написанного кода и создают иерархию CSS селекторов по аналогии с HTML кодом, тем самым LESS расширяет возможности CSS.
Вложенные правила, вложенные директивы, функции и прочие фишки в LESS и других препроцессорах — это, конечно, хорошо, но на мой взгляд все эти пляски вокруг компиляторов, интерпретаторов и усложнения логики не стоят тех преимуществ, что дают, скажем, вложенные правила.
А для ускорения кодирования нужно правильные редакторы использовать, сниппеты и автодополнение. Что действительно хорошо в LESS так это не вложенные правила, а переменные. Правда и их можно редактором заменить, воспользовавшись поиском и заменой в редакторе.
Ниндзя, на вкус и цвет фламастеры разные, кому-то проще написать код LESS и использовать его фишки: вложенные правила, директивы, переменные, функции, миксины и прочее. Кому-то наоброт: проще сделать заготовки в виде сниппетов и прикрутить эммет. А кто-то использует преимущества LESS вместе с преимуществами редактора. Отчасти я разделяю вашу точку зрения, но многим действительно покажется удобным использовать вложенные правила или другие фишки LESS.