В ЦСС есть возможность определять переменные (англ. Custom properties).
Объявляются они так же, как любые другие свойства внутри любого блока, но всегда с префиксом --
Синтаксическая диаграмма именования переменных и селекторов
В названиях переменных можно использовать латиницу, цифры, подчёркивание и дефис:
Синтаксическая диаграмма именования переменных и селекторов
html {
--textColor: #000;
--wrapperWidth: 1000px;
--heading-2: 30px/36px Helvetica, Arial, sans-serif;
}
Переменной можно назначить любое значение и использовать её в любом свойстве. В переменную нельзя записывать селекторы или сами свойства. Только значения.
Значение переменной используется с помощью ЦСС‑функции var():
body {
color: var(--textColor);
}
Вторым аргументом функции можно указать значение, которое будет использовано в случае, если переменная не определена:
body {
color: var(--textColor, #00f);
}
Переменные доступны внутри селектора, в котором они были определены и во всех его потомках. Если определить переменную в глобальном псевдоклассе :root или в html, она будет доступна на всей странице.
Например, можно красить все кнопки в один цвет, но отдельные акцентные кнопки — в другой:
:root {
--buttonColor: blue;
}
.button {
background-color: var(--buttonColor);
}
.accentButton {
--buttonColor: red;
}
Ещё по теме ЦСС‑переменных:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.