В ЦСС есть возможность определять переменные (англ. Custom properties).

Объявляются они так же, как любые другие свойства внутри любого блока, но всегда с префиксом --

Синтаксическая диаграмма именования переменных и селекторов

В названиях переменных можно использовать латиницу, цифры, подчёркивание и дефис:

Синтаксическая диаграмма именования переменных и селекторов
html {
  --textColor: #000;
  --wrapperWidth: 1000px;
  --heading: 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы