Пользовательские свойства CSS

Сегодня CSS-препроцессоры являются де факто стандартом в web-разработке. Одним из достоинств препроцессоров является наличие переменных. Они позволяют избежать дублирования кода, упрощают разработку и рефакторинг. 

В переменных можно хранить цвета, настройки шрифтов, детали раскладки и многое другое. 

$color-main: #a4f;

.item {
    color: $color-main;
}

После сборки исходных файлов всё равно получается обычный CSS и доступа к этим переменным уже нет (например, с помощью JavaScript). Также эти переменные не могут динамически меняться. 

.item {
    color: #a4f;
}

Для решения этой проблемы были созданы пользовательские свойства CSS (Custom Properties). Во многом они похожи на переменные в CSS. 

Синтаксис

Имя свойства должно начинаться с двух дефисов. 

.item {
    --color: #a4f;
}

Вот ещё несколько примеров.

:root {
    --color: #a4f;
    --main-bg: rgb(255, 255, 255);
    --logo-border-color: rebeccapurple;
    --header-height: 100px;
    --content-padding: 1rem 2rem;
    --base-line-height: 1.5;
    --transition-duration: 0.35s;
    --external-link: "external link";
    --margin-top: calc(2vh + 20px);
    --foo: if(x > 5) this.width = 10;
}

Для применения свойства нужно использовать функцию var.

.items {
    --color: #a4f;
}

.items .item{
    color: var(--color);
}

Поддержка

Custom Properties поддерживаются в основных браузерах: https://caniuse.com/#feat=css-variables . 

Тем не менее, рекомендуется обеспечить обратную совместимость. 

Проверить, поддерживаются ли в браузере Custom Properties с помощью CSS:

@supports ( (--a: 0)) {
      /* supported */
}

@supports ( not (--a: 0)) {
      /* not supported */
}

Проверить, поддерживаются ли в браузере Custom Properties с помощью JavaScript:

const isSupported = window.CSS &&
    window.CSS.supports && window.CSS.supports('--a', 0);

if (isSupported) {
    /* supported */
} else {
    /* not supported */
}