Кто уже давно занимается вёрсткой, много раз чувствовали, что CSS-код труден для правок. Например, Вам захотелось поменять цветовую гамму на всей странице. Что для этого нужно? Поменять у всех блоков один цвет на другой. Неудобно? Согласен, для этого придумали SASS и LESS , однако, это так себе выход. Например, Вам...
Кто уже давно занимается вёрсткой, много раз чувствовали, что CSS-код труден для правок. Например, Вам захотелось поменять цветовую гамму на всей странице. Что для этого нужно? Поменять у всех блоков один цвет на другой. Неудобно? Согласен, для этого придумали SASS и LESS, однако, это так себе выход. Например, Вам хочется заменить всю цветовую гамму через JavaScript, или увеличить ширину нескольких блоков в 2 раза? Очевидно, что работа эта требует написание однообразного кода. К счастью, относительно недавно появилась возможность задавать переменные прямо в CSS, и браузеры их без проблем обрабатывают. Об этом мы поговорим в этом материале.
Давайте разберём следующий код:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--bgcolor: #aaa;
--color: #c00;
--width: 200px;
}
p {
background-color: var(--bgcolor);
color: var(--color);
width: var(--width);
}
div {
background-color: var(--bgcolor);
color: var(--color);
width: calc(var(--width) * 2);
}
</style>
</head>
<body>
<div>Заголовок</div>
<p>Некоторый текст...</p>
<div>Подвал</div>
</body>
</html>
Переменные в CSS объявляются в псевдоэлементе root (хотя можно и прямо в самих элементах объявлять переменные). Использование же их очень простое: вместо конкретного значения свойства пишется var(имя_переменной). Особенно интересно использование переменных вместе с функцией calc(). Благодаря этому можно увеличивать или уменьшать множество элементов на сайте, сохраняя при этом все пропорции.
Безусловно, переменные в CSS работают только в современных браузерах (хотя бы 2016-го года).
