На 2016 г. CSS-переменные полностью работоспособны в Chrome и Firefox, у IE тоже в планах реализовать их.

Как часто бывает с новинками JavaScript и CSS, не сразу удается представить себе, для чего CSS-переменные могут пригодиться. Для большинства из нас эти переменные — что-то новое и непривычное, так что не всегда очевидно, к чему их применить. Но мы нашли замечательный ответ — взаимодействие между Javascript и CSS.

Что такое CSS-переменные?

CSS-переменные (см. спецификацию) добавляют в CSS два новых понятия. Отныне можно определять собственные свойства, начинающиеся с двойного дефиса (--):

html {
  --main-color:#06c
}

А затем использовать их с помощью var():

a {
  color:var(--main-color)
}

Для всех, кто знаком с SASS или подобным языком, компилирующимся в CSS, преимущества этого очевидны, можно запросто менять цвета, размеры и т.п. всего в одном месте.

Что интересно, переменные подчиняются тем же правилам наследования, что другие CSS-свойства. Например, вдруг мы решили поэкспериментировать с основным цветом нашего блога:

.blog-post {
  --main-color:#9b806b
}

Все ссылки внутри той части страницы, что относится к записи в блоге, окажутся страшноватого коричневого оттенка.

CSS-переменные просто великолепно сочетаются с выражением calc():

html {
  --header-height:40px
}

.page-content {
  top: calc(var(--header-height)+10px)
}

CSS-переменные и JavaScript

Недавно мы натолкнулись на полифил для ползунка, который написала Лиа Веру, с интересным примером использования CSS-переменных для связи между JavaScript и CSS.

Исторически единственным способом управлять стилями переменной или функцией из JavaScript было, по сути, писать CSS в самом скрипте:

myElement.style.height = height +'px'

Не так уж редко случается отказываться от отдельного CSS вообще и просто писать стили в JS:

var newStyles = document.createElement('style')
document.head.append(newStyles)
newStyles.innerHTML =".my-element {"+
  "height: "+ height +"px;"+
  "width: 40px;"+
  "color: #9b806b;"+
"}"

CSS-переменные позволяют делать намного лучше, возьмем тот же пример:

.my-element {
  height:var(--element-height);
  width:40px;
  color:#9b806b;
}

Тогда в JavaScript можно прописать эту переменную именно для нашего элемента:

myElement.style.setProperty('--element-height', height +'px')

Если исхитриться, можно обойтись и без конкатенации:

.my-element {
  height: calc(var(--element-height)*1px);
}

myElement.style.setProperty('--element-height', height)

Можно даже определить в CSS значение по умолчанию, которое потом переопределится скриптом:

html {
   /* переопределится в JS */
  --element-height:20px
}

Теперь можно аккуратно передавать информацию между JavaScript и стилями. Ну разве это не потрясающе?

Источник: http://css-live.ru/articles/vzaimodejstvie-mezhdu-javascript-i-css-s-pomoshhyu-css-peremennyx.html