В связи с популярностью создания переключателя темной темы для сайта, вырос интерес к псевдоклассу :root
. Почему так случилось, и что их так объединяет – ниже объясню. Для начала подчеркну, что это материал будет краток: затронем только основное.
Что такое переменные CSS
Это хранилище данных, в котором хранится значение свойств CSS, назначены пользователем. Они многократно применяются в файле стилей вместо прямого значения. Это позволяет удобней редактировать значение свойств.
В чём особенность переменных CSS
Как я уже сказал выше, они упрощают редактирование стилей. Допустим, у нас есть большой файл стилей сайта. Где определены все цвета сайта, отступы и т.д. И чаще всего есть такие значения, которые очень часто повторяются. Пример: color: #454545;
, background: #454545;
. То есть, применяется один и тот же цвет к разным элементам. И это цвет во всём файле стилей может прописываться много раз.
В случае изменения этого цвета придется искать его по всему файлу. Или через автозамену, что не всегда может быть корректным. Поэтому задействуем превдокласс :root
и в нем создадим переменную, а значение этом переменной назначим этот цвет.
:root { --color-main: #454545; --color-link: #EA2816; --color-bg-1: #333333; --второй-цвет-сайта: #C1EAEA; /* Размер текста */ --font-size-h1: 32px; --font-size-h2: 26px; --font-size-p: 16px; } /* Класс, в котором используются переменные */ .header { color: var(--color-main); background: var(--color-bg-1); font-size: var(--font-size-p); } /* медиа запрос */ @media (max-width:720px) { :root { /* Размер текста */ --font-size-h1: 26px; --font-size-h2: 18px; --font-size-p: 14px; } }
Пояснение
:root – это глобальный псевдокласс, в котором объявляются переменные для их дальнейшего использования. Обычно :root
пишется в начале файла. Слово :root
должно начинаться с двоеточия, как показано выше. Затем идут фигурные скобки {} – в них прописываются переменные.
— color-main – это название переменной. Оно начинается с двух дефисов и может включать в себя цифры, буквы – латинские и русские, а также заглавные буквы. И причём первый символ может быть как из буквы, так и с цифры. В переменных CSS может храниться любое значение каскадной таблицы: цвета, отступы, размеры и т.д.
Важно! Переменная чувствительная к регистру букв: если были использованы заглавные буквы, то в таком же именование она должна использоваться в будущем.
Также важно! Несмотря на то что переменную можно написать с русскими словами, всё же, желательно, этого не делать. Если в дальнейшем будет работа с переменными при помощи JavaScript, могут возникнуть определённые трудности.
var () – это функция, с помощью которой применяются переменные к свойствам. Пишется слова var, а в круглых скобках выводится переменная. То есть пишется название самой переменной.
@media – в медиа запросе можно свободно менять значение переменных, как это показано выше, для адаптивности различных устройств.
Переменная не определенна
Когда, по каким-то причинам, будет удалена переменная из :root
в файле CSS, тогда вместо значения, где она использовалась, появится надпись в инспекторе стилей «переменная не определенна/не установлена».
Поэтому в функции var()
есть возможность задать два-три аргументов для страховки. То есть, кроме одной переменной, можно указать через запятую несколько, или прямо написать значения.
/* Если переменные не определенны */ .header { color: var(--color-main, --color-main2, #333333); background: var(--color-bg-1, red); font-size: var(--font-size-p, 33px); }
Это будет работать так: если первая переменная не установлена (удалена или не объявлена), будет выводиться значение второй. Если и вторая «пустая», тогда значение свойства будет последний аргумент – прямое написание значения. Как показано выше в примере.
Локальная переменная CSS
Выше мы рассмотрели использование глобального псевдокласса :root
, который, по сути, действует для каждого элемента на всей веб-странице. То есть все объявленные в нем переменные, могут применяться к любому классу/идентификатору в CSS-файле.
По мимо глобального псевдокласса есть возможность использования переменных в определённом классе или идентификаторе. Она будет работать только в его области, во всех его дочерних селекторах. Давайте рассмотрим на примере. Допустим, у нас есть родительский HTML-блок. В нем есть вложенные блоки, которые содержат какой-то контент.
<div class="wrap_content"> <div class="div_one"> <h2>Название раздела</h2> <p>Описание раздела</p> </div> <div class="div_two"><img src="" alt="Картинка раздела"></div> </div>
В первую очередь нам нужно объявить переменную для родительского элемента с классом wrap_content. Для этого нам не нужен псевдокласс :root
, но напомню, что эти переменные, они же локальные, будут работать только во вложенных элементах родительского блока wrap_content.
.wrap_content { --text-color: #222222; --text-size: 26px; --block-bg: #eeeeee; } .div_one p { font-size: var(--text-size); color: var(--text-color); } .div_two { background: var(--block-bg); }
Такое локальное использование подойдет для оформления блока, который полностью по стилю и цвету отличается от основного стиля сайта. И в начале записи я сказал, что псевдокласс :root
имеет какое-то особое отношение с созданием темной версии сайта. Это потому что, через переменные CSS намного проще манипулировать со цветом.