Для тех, кто использовал препроцессор Sass для создания и применения переменных, есть хорошая новость - переменные теперь есть и в нативном CSS. Это значит, что нет лишней необходимости в препроцессоре и компиляции.

Как мы пользуемся переменными в Sass:

$primary-color: #333;
$secondary-color: #999;

.title {
  color: $primary-color;
}
.subtitle {
  color: $secondary-color;
}

А вот как можно эти же переменные обозначить в чистом CSS:

:root {
  --primary-color: #333;
  --secondary-color: #999;
}

.title {
  color: var(--primary-color);
}
.subtitle {
  color: var(--secondary-color);
}

И никакого препроцессора, никаких дополнительных установок, только обычный CSS из все. Красиво, не правда ли?

Синтаксис CSS-переменных

Объявление переменной должно содержать имя переменной (с двойным тире -- вначале) и его значение:

--black-color: #000;

Чтобы применить переменную, необходимо ее имя заключить в выражение var():

color: var(--black-color);

Область видимости CSS-переменных

Обозначение переменных может быть глобальным (что позволяет нам получить доступ к ним в любом месте) и локальным (переменные доступны только в пределах конкретного селектора):

:root {
  /* обозначим переменную глобально */
  --size: 18px;

  /* это свойство будет работать везде */
  font-size: var(--size);  /* 18px */
}

.element {
  /* обозначим переменную локально */
  --color: chocolate;

  /* это свойство будет работать только внутри селектора .element */
  color: var(--color);  /* chocolate */
}

Использование CSS-переменных

Кроме стандартного обозначения переменной с единичным значением, можно задавать сложное значение:

:root {
  --margin: 10px auto 20px;
}
.section {
  margin: var(--margin);
}

Переменная может быть использована в вычислениях с помощью calc():

:root {
  --value: 12;
}
.section {
  padding: calc(var(--value) * 1px) calc(var(--value) * 2px);  /* 12px 24px */
}

Также переменную можно включать в значения других переменных:

:root {
  --border-width: 4px;
  --border: var(--border-width) solid #000;
}
.section {
  border: var(--border);
}

Переопределение CSS-переменных

Допустим, мы имеем следующую разметку:

<p>Текст стандартного размера</p>
<div class="large-text">
  <p>Текст измененного размера</p>
</div>

Мы можем переопределить глобальное значение переменной для определенного контекста:

:root {
  --default-size: 16px;
}
p {
  font-size: var(--default-size);
}
.large-text {
  --default-size: 20px;
}

Запасное значение CSS-переменной (fallback)

Чтобы перестраховаться от случая, когда переменной не задано значение, используют запасное значение (fallback):

p {
  color: var(--color, pink);  /* Если у переменной --color нет значения, применится цвет 'pink' */
}

Использование CSS-переменных в JavaScript

Одно из огромных преимуществ переменных CSS над переменными Sass - к ним можно получить доступ через JavaScript.

Для любого из способов декларирования CSS-переменной:

<p style="--color: red"></p>

или

<style>
  p { --color: red; }
</style>

мы можем использовать метод getComputedStyle():

const element = document.querySelector('p');
getComputedStyle(element).getPropertyValue('--color');  // => 'red'

Чтобы задать элементу переменную, используем setProperty():

const element = document.querySelector('p');
element.style.setProperty('--color', 'blue');

Получить значение глобальной переменной (которая расположена в :root):

getComputedStyle(document.documentElement).getPropertyValue('--color');
Поддержка браузерами
chrome
Chrome
49
firefox
Firefox
31
internet explorer
IE
 
edge
Edge
16
safari
Safari
10
opera
Opera
36
Смотреть на caniuse.com