Изучаем LESS: Вложенные правила

От автора: мы продолжаем нашу серию статей «Изучаем LESS», и сегодня мы рассмотрим, как делать в LESS правило вложенным, чтобы писать максимально чистый код. Вы еще не читали наши три предыдущие статьи: «Изучаем LESS: Введение», «Изучаем LESS: Переменные» и «Изучаем LESS: Миксины»? Обязательно прочтите.

План статей серии:

Теперь мы перейдем к вложенным правилам, теме, которая может быть немного трудна для понимания, но мы разберем ее подробно и приведем практические примеры.

Что значит «вложенные»?

Я уверен, что вы слышали о «вложенности» в коде, вероятно, в связи с вложенными таблицами в старых сайтах с табличными макетами (или новым табличным дизайном HTML-писем). В LESS в основном происходит то же — мы вкладываем правила в другие правила.

Давайте рассмотрим пример. Вы пишете код сайта и у вас есть правило для абзаца. В дополнение к тегу стандартного абзаца у вас также есть классы для вступительного абзаца и выделенного абзаца. Предположим, вы собираетесь установить стандартный абзац с базовым шрифтом sans-serif, размером шрифта, высотой строки и т. д. Вот как выглядит наш CSS (обратите внимание, он не входит в файл LESS – это пример):

Довольно стандартно. Для класса вступительного абзаца можно задать размер шрифта немного больше и вариант шрифта small-caps. А для выделенного абзаца мы сделаем текст полужирным синим. Не спрашивайте меня, как это будет выглядеть с точки зрения современных тенденций дизайна – я просто пытаюсь придумать креативные примеры!

Таким образом, в CSS вы бы описали такие классы:

Код не очень длинный, но это потому, что это простой пример. Но LESS и это может улучшить.

Написание вложенного правила в LESS

Мы собираемся повторить код, который мы написали выше, используя LESS и вложенные правила. Вложенное правило в LESS начинается, как обычное правило. Мы также используем переменные, просто чтобы дать вам представление, как сочетаются эти два элемента. Для начала рассмотрим тег базового абзаца:

Теперь мы вложим правило в класс .intro. Для этого мы просто создаем класс, как обычно, но включаем класс внутри фигурных скобок в правило абзаца.

LESS делает компиляцию кода в следующее:

Что идентично тому, что было у нас изначально. Может показаться, что на самом деле мы использовали больше кода, чем в нашем первоначальном примере CSS. Но имейте в виду, что вы, вероятно, будете хранить переменные в отдельном LESS-файле, что позволит легко обрабатывать их.

Но подождите, мне не нужно потомков, что мне делать?

Отличный вопрос, и LESS предлагает быстрый и простой ответ. Если вы предпочитаете, чтобы CSS читал p.intro вместо p .intro просто добавьте амперсанд (&) перед вложенным правилом. Посмотрите пример кода для вступительного абзаца.

Что дает следующий скомпилированный код:

Это очень важно, потому что в одном случае вы захотите ввести оператор потомка, а в другой раз вам просто нужно будет, чтобы целевые элементы были с определенными классами.

Что дальше?

Далее мы рассмотрим функции в LESS. Мы также затронем тему операторов. У кого-нибудь есть вопросы по использованию вложенных правил в файлах LESS? Дайте мне знать в комментариях ниже, и увидимся в следующей статье! Спасибо за уделенное время.

Автор: Alex Ball

Источник: //www.developerdrive.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: