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