Переменные в CSS
Кто уже давно занимается вёрсткой, много раз чувствовали, что 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-го года).
-
Создано 24.05.2017 07:30:00
-
Михаил Русаков
Комментарии (3):
Ну хоть когда-то что-то годное подъехало!
Ответить
Доброго времени суток! данные схемы напрочь отвергаются спецификациями и валидаторами CSS. Есть ли способ использования переменных в соответствии со спецификацией?
Ответить
Не понял смысла в этих переменных. Все-равно пришлось и теге p и в теге div писать width
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.