Как еще использовать CSS-переменные

Допустим, у вас есть текст с opacity: 0, и когда страница загрузилась, надо сделать тексту opacity: 1.

Страница загрузилась — текст показался.

Решить задачу просто. Сначала подписываемся на загрузку страницы, выставляем класс к body, а потом меняем стиль относительно класса:

/* Изначальный стиль текста */
.text {
  opacity: 0;
  transition: opacity 0.5s linear;
}

window.onload = () => document.body.classList.add("page-loaded");

/* Меняем opacity для загруженной страницы */
.page-loaded .text {
  opacity: 1;
}

Простенько и красиво. Но что, если таких текстов будет много, у кого-то opacity, у кого-то scale — много кода.

Как решить задачу через CSS-переменные

Объявляем переменную --page-loaded в CSS и присваиваем ее в текст

:root {
  --page-loaded: 0;
}

.page-loaded {
  --page-loaded: 1;
}

.text {
  opacity: var(--page-loaded);
  transition: opacity 0.5s linear;
}

И все! Короче и красивее. Поиграйтесь в кодсандбоксе.

Значения переменных можно менять при :hover, :active и проч.

Давайте разберем еще один паттерн. Допустим, у нас есть кнопка с иконкой, и при наведении на кнопку иконка должна стать красной. Навели на кнопку — иконка покраснела.

Обычный вариант

/* Положим иконку в after */
.button::after {
  color: black;
}

.button:hover::after {
  color: red;
}

Вариант с CSS-переменными

.button {
  --text-color: black;
}

.button::after {
  color: var(--text-color);
}

.button:hover {
  --text-color: red;
}

Поиграться в кодсандбоксе.

Но тут с ограничениями. Мы не сможем изменить переменную родителя — не получится из .button изменить переменную, которая в :root. В .button меняем переменные только .button.

В данной задаче проще просто поменять цвет, а не переменную. Но когда использований значений много, то проще работать с переменными.

Препроцессор такого не сможет!