18
Янв
2018

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

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

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

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

Вступление

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

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

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

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

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

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

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

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

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

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

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

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

Таким образом, в 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

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

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

Источник: https://webformyself.com/izuchaem-less-vlozhennye-pravila/

Тебе может это понравится...

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