Слияние и импорт стилей

В этой статье мы с Вами научимся производить слияние различных значений одноименных CSS свойств в одном селекторе (блоке объявлений) и детально рассмотрим как проиходит импорт стилей из других таблиц стилей в LESS.

Слияние и комбинирование стилей

В этом разделе мы научимся с Вами с помощью LESS производить слияние в одном блоке объявлений различных значений из нескольких одноименных CSS свойств, разделяя при этом эти значения как пробелом, так и запятой, в зависимости от требуемого конкретным свойством синтаксиса. Для каких CSS свойств это может быть полезно? Например, для создания стилей трансформации элементов, переходных эффектов, текстовой тени, тени для элементов и тому подобные.

Добавление свойства через запятую

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

.myMixin() {
	text-shadow: 2px -10px 6px indigo;
}
.myMixin2() {
	text-shadow: 0 -5px 4px violet;
}
.myClass {
	.myMixin(); // вызываем примесь
	.myMixin2(); // вызываем примесь
}

Результат компиляции может нас не устроить:

.myClass2 {
	text-shadow: 2px -10px 6px indigo;
	text-shadow: 0 -5px 4px violet;
}

В результате компиляции мы получили у одного селектора два одноименных свойства с разными значениями, в реэультате чего при применении стилей к элементу одно свойство просто будет переопределено другим, что нас не устраивает, ведь в этом случае речи о слиянии идти не может. Как в этом случае необходимо поступить? LESS предлагает нам в этом случае использовать специальный синтаксис:

.myMixin() {
	text-shadow+: 2px -10px 6px indigo;
}
.myMixin2() {
	text-shadow+: 0 -5px 4px violet;
}
.myClass {
	.myMixin(); // вызываем примесь
	.myMixin2(); // вызываем примесь
}
.myClass2 {
	.myMixin(); // вызываем примесь
	text-shadow+: 0 -5px 4px violet;
}
.myClass3 {
	.myMixin(); // вызываем примесь
	text-shadow: 0 -5px 4px violet;
}
.myClass4 {
	.myMixin(); // вызываем примесь
}

В этом примере мы создали два миксина в которых определили по одному свойству text-shadow css3 , которое определяет текстовую тень для элемента. Обратите внимание, что после наименования свойства мы указываем символ операции сложения (+). Этот символ определяет, что если у элемента уже имеется подобное свойство, то необходимо добавить значение к существующему свойству через запятую, а не создавать новое отдельное свойство, если оно уже определено, как произошло в самом первом примере этой статьи. Другими словами этот символ сообщает компилятору, что необходимо произвести слияние значений однотипных свойств при нахождении.

Обратите внимание, что недостаточно указать символ операции сложения (+) у примеси (миксина), необходимо так же указать его у того же свойства внутри селектора, где мы вызываем этот миксин, иначе свойство будет продублировано компилятором.

Результат компиляции будет следующий:

.myClass {
	text-shadow: 2px -10px 6px indigo, 0 -5px 4px violet;
}
.myClass2 {
	text-shadow: 2px -10px 6px indigo, 0 -5px 4px violet;
}
.myClass3 {
	text-shadow: 2px -10px 6px indigo;
	text-shadow: 0 -5px 4px violet;
}
.myClass4 {
	text-shadow: 2px -10px 6px indigo;
}

Добавление свойства через пробел

Мы с Вами научились производить слияние значений однотипных свойств в одном объявлении, разделяя их значения запятой. Если вы хорошо знакомы с CSS, то вы должны знать, что значения некоторых свойств при перечислении необходимо указывать через пробел. Давайте рассмотрим как это осуществить на следующем примере:

.myMixin() {
	transform+_: scale(2);
}
.myMixin2() {
	transform+_: rotate(1turn);
}
.myClass {
	.myMixin();
	.myMixin2()
}
.myClass2 {
	.myMixin();
	transform+_: rotate(1turn);
}
.myClass3 {
	.myMixin();
	transform: rotate(1turn);
}

Обратите внимание, что по аналогии с перечислением значений через запятую, мы после наименования свойства также указываем символ операции сложения (+), но дополнительно указываем символ нижнего подчеркивания. Эти два символа в совокупности определяют, что если у элемента уже имеется подобное свойство, то необходимо добавить значение к существующему свойству через пробел, а не создавать новое отдельное свойство. Это так же приводит к слиянию значений однотипных свойств при нахождении, но через пробел, а не через запятую.

Как и в предыдущем примере недостаточно указать символы +_ у примеси (миксина), необходимо так же указать его у того же свойства внутри селектора, где мы вызываем этот миксин, иначе свойство будет продублировано компилятором.

Результат компиляции будет следующий:

.myClass {
	transform: scale(2) rotate(1turn);
}
.myClass2 {
	transform: scale(2) rotate(1turn);
}
.myClass3 {
	transform: scale(2);
	transform: rotate(1turn);
}

Импорт стилей

В CSS директива (правило) @import используется для импорта содержимого CSS файла в текущую таблицу стилей, это правило должно предшествовать всем другим видам правил, за исключением правила @charset, которое задает кодировку символов, используемую в таблице стилей. Если вы раньше не сталкивались с использованием этого правила, то вы можете ознакомиться с ним в учебнике CSS 3 в статье "Введение в СSS".

Импорт стилей из других таблиц стилей в LESS осуществляется с использованием одноименного правила @import. Главным отличием от CSS в импорте стилей является то, что компилятор LESS абсолютно не интересует где вы вызовете это правило, это может быть как в начале документа, в теле документ, или в конце документа. Рассмотрим следующий пример:

@import "valid1.less" // файл будет успешно импортирован

.myClass {
	color: red;
}

@import "valid2.less" // файл будет успешно импортирован

.myClass2 {
	color: green;
}

@import "valid3.less" // файл будет успешно импортирован

В этом примере мы импортировали стили из трех различных файлов, независимо от места вызова правила @import стили во всех случах будут корректно импортированы к текущей таблице стилей.

Расширения файлов

В этом разделе мы с Вами рассмотрим как происходит импортирование файлов в зависимости от их расширения и от способа указания файла для импорта. Сразу хочу обратить внимание на то, что расширение файла может быть любым, главное чтобы внутри этого файла содержался валидный CSS или LESS код.

Давайте с Вами перечислим и рассмотрим следующие основные нюансы при импорте файлов с помощью правила @import:

При подключении файла, расширение которого соответствует .css, подключение к документу осуществляется без обработки его компилятором (как есть).
При подключении файла, расширение которого отсутствует, то такой файл подключается как файл с расширением .less и будет обработан компилятором.
При подключении файла с любым отличным от .css расширением или файла, расширение которого соответствует .less, то такой файл будет подключен как файл с расширением .less и будет обработан компилятором.

Давайте рассмотрим следующий пример в котором мы импортируем различные файлы:

@import "styles";              // файл импортируется и компилируется как less файл независимо от разрешения
@import "styles2.less";   // файл импортируется и компилируется как less файл
@import "styles3.css";    // файл импортируется как есть без компиляции
@import "styles4.php";  // файл импортируется и компилируется как файл less

Настройка импортирования стилей

LESS, по сравнению с нативным CSS правилом @import расширяет его возможности, чтобы обеспечить большую гибкость при работе с импортированием внешних файлов, содержащих таблицы стилей и позволяет использовать специальные ключевые слова со следующим синтаксисом:

// использование одного ключевого слова
@import (keyword) "filename";

// использование нескольких ключевых слов
@import (keyword1, keyword2) "filename";

Для переопределения поведения импорта стилей можно использовать следующие параметры (ключевые слова):

reference (использует less файл, но не выводит его при компиляции, если на него нет ссылки)
inline (включает исходный файл в вывод, но не компилирует его)
less (рассматривает файл как файл less, независимо от того какое расширение файла)
css (рассматривает файл как файл css, независимо от того какое расширение файла)
once (добавляет файл только один раз, это поведение по умолчанию)
multiple (добавляет файл несколько раз при множественном импорте)
optional (позволяет продолжить компиляцию, если файл не найден)

Давайте с Вами подробно рассмотрим каждое ключевое слово.

Ключевое слово reference

Ключевое слово reference определяет, что необходимо импортировать внешний файл, но без добавления импортированных стилей в скомпилированные выходные данные, если на них нет ссылки в таблице стилей с использованием примесей (mixin), или псевдокласса :extend. Если вы раньше не встречались с использованием псевдокласса :extend, то Вы можете найти подробную информацию о нём в "предыдущей статье".

Использование ключевого слова reference может быть полезно, когда Вам необходимо использовать только определённые селекторы, а не все содержимое файла, например при работе с какими-то библиотеками.

Давайте рассмотрим пример в котором у нас есть следующий файл со стилями:

.myImportClass {
	color: red;
	&:hover { // используем оператор родительского элемента
		color: blue;
	}
}
.myImportClass2 {
	background: blue;
}

Используя правило @import и ключевое слово reference подключим этот файл к следующему документу:

@import (reference) "filename.less"; // подключаем файл со стилями, используя ключевое слово reference

.myClass {
	.myImportClass(); // вызываем примесь (из подключенного файла)
	background: green;
}
.myClass2 {
	&:extend(.myImportClass); // используем оператор родительского элемента и псевдокласс extend
}

Внутри документа объявлены два класса, внутри первого мы вызываем примесь, благодаря которой мы импортруем стили из селектора, созданного в документе, который мы подключили с помощью правила @import. Внутри второго класса мы используем псевдокласс :extend, который позволяет объединить селектор в котором он был вызван, с тем селектором на который он ссылается при вызове (селектор из файла, который мы импортируем).

Результат компиляции будет следующий:

.myClass2 {
	color: red;
}
.myClass {
	color: red;
	background: green;
}
.myClass:hover {
	color: blue;
}

Обратите внимание, что ни один класс, который содержался в импортированом файле не попал после компиляции в выходной файл. При использовании примеси после компиляции мы просто получили стили этого класса, при использовании псевдокласса :extend результат оказался схожий, но обратите внимание, что при этом мы на выходе не получили групповой селектор (отсутствует расширяемый класс из подключаемого файла).

Ключевое слово inline

Ключевое слово css определяет, что необходимо включать внешние файлы, но не компилировать (обрабатывать) их. Это может быть полезным когда файлы *.сss содержат конструкции, которые необходимо экранировать в LESS, или они впринципе не поддерживаются в LESS.

Например:

@import (inline) "filename.css"; // будет импортирован к текущему файлу без его компиляции (обработки)

Ключевое слово less

Ключевое слово less определяет, что файл импортируется как файл *.less, независимо от расширения файла. Это означает, что правило @import останется в таблице стилей после компиляции (содержимое файла при этом не импортируется).

Например:

@import (less) "filename.css"; // будет импортирован к текущему файлу и скомпилирован

Ключевое слово css

Ключевое слово css определяет, что файл импортируется как при нативном использовании правила @import в CSS, независимо от расширения файла. Это означает, что правило @import останется в таблице стилей после компиляции (содержимое файла при этом не импортируется и не компилируется).

Например:

@import (css) "filename.less"; // файл не  импортируется и не компилируется

Результат компиляции будет следующий

@import "filename.less";

Ключевое слово once

Ключевое слово once определяет, что файл импортируется только один раз и последующие правила @import для этого файла будут проигнорированы. Это поведение установлено компилятором по умолчанию, например:

@import (once) "filename.less"; // импорт стилей будет произведен
@import (once) "filename.less"; // импорт стилей будет проигнорирован

Ключевое слово multiple

Ключевое слово multiple необходимо, чтобы разрешить импорт стилей из нескольких файлов с одинаковыми именами. Это поведение противоположно поведению установленному по умолчанию (ключево слово once).

Например:

@import (once) "filename.less"; // импорт стилей будет произведен
@import (once) "filename.less"; // импорт стилей будет произведен

Ключевое слово optional

Ключевое слово optional необходимо для того, чтобы разрешить импорт файла только в том случае, если он существует (при его наличии). По умолчанию LESS вызывает ошибку FileError и останавливает компиляцию при импорте файла, который не может быть найден, ключевое слово optional изменяет это поведение и препятствует возникновению подобных ошибок, продолжая компиляцию, когда файл не найден.

Например:

// файл импортируется и компилируется при его наличии (если файла нет ошибки не происходит)
@import (optional) "modificators.less";

Псевдокласс Extend

Продолжение следует...