CSS custom properties (variables)

[Tenno Seremel]

Таки, пожалуй, начинаю использовать это в работе. Суть такова (вообще у меня там всё несколько иначе, но для примера сойдёт):

:root {
	--default-shadow: 2px 2px 2px 0 rgba(100,100,100,.3);
	--primary-decoration-color: #303030;
}

button:not([class]) {
	padding: .4em 1em;
	box-shadow: var(--default-shadow);
}
h1 {
	box-shadow: var(--default-shadow);
	border-bottom: 1px solid var(--primary-decoration-color);
	text-transform: uppercase;
	font-size: 1.3rem;
}

Т.е. это просто любое свойство, название которого начинается с «--». А чтобы получить значение используется конструкция var(название_свойства). Ну или var(название_свойства, значение_по_умолчанию) если вдруг какая-то переменная может отсутствовать. Значением по умолчанию может быть другой var(), например: var(--primary-decoration-color, var(--primary-color, #55aa7f)).

Используется для того, чтобы не редактировать какое-то одно значение в 100500 разных местах когда это понадобится. Если подойти с умом, то можно также относительно легко менять окрас темы, тёмная/светлая там, и т.д.

Comments

[Tenno Seremel]

А ещё var() нельзя использовать в @media (в самом правиле, а не внутри), потому что гладиолус

Объясняют это тем, де, свойства наследуются, а @media оно вне дерева. Что мешает брать значения из :root история умалчивает.

[Tenno Seremel]

Попытки описать общие свойства input'ов и кнопок через эти пременные приводят к безумию. Лучше задавать основные цвета и плясать от них. Ну, если дизайнер вменяемый, конечно. А если нет, то так и так бесполезно пытаться