Продолжаем наше обучение LESS, и сегодня мы хотели бы вам рассказать о вложенных правилах или Nested Rules в LESS, которые помогут вам сохранить ваш код максимально понятным. Если вы не читали наши первые три части, посвященные изучению LESS, то обязательно ознакомьтесь с ними: «Изучаем LESS: Введение», «Изучаем LESS: Использование переменных», «Изучаем LESS: Mixin-ы».
Теперь давайте познакомимся с вложенными правилами, темой, которую, вероятно, будет сложно усвоить, но мы разложим все по полочкам и подкрепим это все отличными примерами кода.
Что означает «вложенные»?
Наверняка вы уже слышали о «вложенности» при работе с кодом. Возможно, это случалось при вложенных таблицах при работе старым методом разработки табличной разметки. С помощью LESS мы, в принципе, реализуем ту же самую идею, мы вкладываем правила в другие правила.
Давайте создадим пример. Вы пишете код для сайта, и у вас есть правило paragraph. Вдобавок к вашему стандартному тэгу paragraph, у вас также имеются классы для вступительного параграфа и выделенного параграфа. В данном случае, давайте предположим, что вы собираетесь оформить стандартный параграф стандартным шрифтом без засечек обычного размера со стандартным межстрочным интервалом. Ваш CSS-код должен выглядеть следующим образом (учтите, что это не пойдет в наш файл LESS – это всего лишь пример):
p { color: #232323; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; }Вроде стандартно. Для класса вступительного параграфа вы выставляете больший по размеру шрифт, и весь текст отображен в прописном формате. А для выделенного параграфа текст выделяется полужирным, и окрашивается в синий цвет. Не спрашивайте, почему мы это делаем в наше то время, так как мы просто хотим, чтобы пример был наглядным!
Итак, в CSS вы, вероятно, пропишите класс следующим образом:
p { color: #232323; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; } p .intro { font-variant: small-caps; font-size: 16px; line-height: 24px; } p .highlight { color: #00214D; font-weight: bold; }Код будет не таким уж длинным, но во многом за счет того, что это простенький пример. Но в LESS он будет еще гораздо менее длинным.
Создаем вложенное правило LESS
Мы собираемся продублировать код, который мы написали перед использованием LESS и вложенных правил. Вложенное правило LESS начинается так же, как и обычное правило. Для этого мы воспользуемся переменными, чтобы понять концепт.
Для начала давайте посмотрим на наш основной тэг paragraph:
// Variables // --------- @textColor: #232323; @textHighlight: #00214D; @fontFamily: Helvetica, Arial, sans-serif; @fontSize: 14px; @lineHeight: 21px; @introSize: 16px; @introLineHeight: 24px; @introFontVariant: small-caps; // LESS for Paragraph // ------------------ p { color: @textColor; font-family: @fontFamily; font-size: @fontSize; line-height: @lineHeight; }Сейчас мы собираемся вложить в класс .intro. Для этого нам нужно создать класс самым обычным образом, но включить класс внутрь фигурных скобок правила paragraph.
// Variables // --------- @textColor: #232323; @textHighlight: #00214D; @fontFamily: Helvetica, Arial, sans-serif; @fontSize: 14px; @lineHeight: 21px; @introSize: 16px; @introLineHeight: 24px; @introFontVariant: small-caps; // LESS for Paragraph // ------------------ p { color: @textColor; font-family: @fontFamily; font-size: @fontSize; line-height: @lineHeight; .intro { font-variant: @introFontVariant; font-size: @introSize; line-height: @introLineHeight; } // End of .intro class .highlight { color: @textHighlight; font-weight: bold; } // End of .highlight class } // End of paragraph ruleВесь вышеприведенный код LESS компилируется и дает нам следующий результат:
p { color: #222222; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; } p .intro { font-variant: small-caps; font-size: 16px; line-height: 24px; } p .highlight { color: #00214d; font-weight: bold; }который идентичен тому, что у нас был изначально. Сейчас может показаться, что здесь больше кода, чем в начальном примере CSS, но вы учитывайте, что ваши переменные были размещены в отдельном LESS-файле, что позволяло гораздо легче производить манипуляции.
Погодите, что мне делать, если я не хочу все элементы делать дочерними?
Отличный вопрос, и LESS включает в себя быстрое и простенькое решение. Если вы предпочитаете, чтобы в вашем CSS-коде было p.intro вместо p .intro, просто добавьте знак & перед вашим вложенным правилом. Ознакомьтесь с примером класса intro в коде примера, приведенном ниже.
// LESS for Paragraph // ------------------ p { color: @textColor; font-family: @fontFamily; font-size: @fontSize; line-height: @lineHeight; &.intro { font-variant: @introFontVariant; font-size: @introSize; line-height: @introLineHeight; } .highlight { color: @textHighlight; font-weight: bold; } }Что в результате дает нам следующий скомпилированный код:
p { color: #222222; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; } p.intro { font-variant: small-caps; font-size: 16px; line-height: 24px; } p .highlight { color: #00214d; font-weight: bold; }Это очень важно учитывать, так как будут моменты, когда вам нужен будет дочерний оператор, а также случаи, когда вам просто нужно будет определить элементы конкретными классами.