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

Привет!

Попробовал использовать пользовательские CSS свойства (они же CSS переменные, они же CSS Custom Properties).

Приятно был удивлён, что это достаточно просто если понимать основную механику — это просто свойства CSS.
Они также наследуются, также задаются через JS, Media, и т.д.

У функции var() есть удобный второй параметр, через который можно задавать значение по умолчанию.
Например: 
text-align: (--text-aligment, center);
возмёт значение из свойства --text-aligement, но если его нету то задаст center

Посмотрите мою простую демку.
Там я задаю свойствами в селекторе :root {} цвета, тексты и части свойств.
Через JS уже изменяю значения переменных в CSS, в зависимости от положения курсора мыши и размера экрана.
И всё это нативно, без препроцессоров и прочих 3-их лишних.
Останется нам дождаться когда Edge подправит своё поведение и можно будет использовать.