Использование переменных в CSS Всем привет!  В JavaScript-ми | Frontender's notes [ru]

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

Всем привет! 

В JavaScript-мире препроцессоры CSS — это очень полезные и популярные технологии. Препроцессоры расширяют возможности CSS, позволяя пользоваться, например, переменными и функциями. Но нам теперь доступны более мощные возможности CSS, например мы можем создать переменные без использования препроцессоров.

Как это сделать:
Для объявления переменной достаточно поставить два тире (--) перед её именем. После этого, там, где нужно значение переменной, вызывают функцию var(), передавая ей созданную ранее переменную в качестве аргумента.

Пример:

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background: var(--base);
  -webkit-filter: blur(var(--blur));
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}

Собственно как то так, удачи вам в экспериментах!