Псевдокласс root: переменные CSS

В связи с популярностью создания переключателя темной темы для сайта, вырос интерес к псевдоклассу :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 намного проще манипулировать со цветом.