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

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

Наверняка вы уже слышали о «вложенности» при работе с кодом. Возможно, это случалось при вложенных таблицах при работе старым методом разработки табличной разметки. С помощью 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; }
Это очень важно учитывать, так как будут моменты, когда вам нужен будет дочерний оператор, а также случаи, когда вам просто нужно будет определить элементы конкретными классами.

Что дальше?

Дальше мы ознакомимся с функциями в LESS. Мы также затронем операторы. Спасибо за чтение.