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

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

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

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

Вступление

Использование Переменных

Использование Миксинов

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Использование Вложенных правил

Использование Функций

Разделяй и властвуй

Применение на практике

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

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

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

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

p {
 color: #232323;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 14px;
 line-height: 21px;
}

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Таким образом, в 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 начинается, как обычное правило. Мы также используем переменные, просто чтобы дать вам представление, как сочетаются эти два элемента. Для начала рассмотрим тег базового абзаца:

// Переменные
// ---------

@textColor: #232323;
@textHighlight: #00214D;
@fontFamily: Helvetica, Arial, sans-serif;
@fontSize: 14px;
@lineHeight: 21px;

@introSize: 16px;
@introLineHeight: 24px;
@introFontVariant: small-caps;

// LESS для абзаца
// ------------------

p {
 color: @textColor;
 font-family: @fontFamily;
 font-size: @fontSize;
 line-height: @lineHeight;
}

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

// Переменные
// ---------

@textColor: #232323;
@textHighlight: #00214D;
@fontFamily: Helvetica, Arial, sans-serif;
@fontSize: 14px;
@lineHeight: 21px;

@introSize: 16px;
@introLineHeight: 24px;
@introFontVariant: small-caps;

// LESS для абзаца
// ------------------

p {
 color: @textColor;
 font-family: @fontFamily;
 font-size: @fontSize;
 line-height: @lineHeight;

 .intro {
  font-variant: @introFontVariant;
  font-size: @introSize;
  line-height: @introLineHeight;
 } // Конец класса .intro

 .highlight {
  color: @textHighlight;
  font-weight: bold;
 } // Конец класса .highlight 

} // Конец правила абзаца

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 просто добавьте амперсанд (&) перед вложенным правилом. Посмотрите пример кода для вступительного абзаца.

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

Автор: Alex Ball

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

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

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree