CSS переменные в webkit [перевод]

Мой вольный (и первый) перевод статьи CSS variables

Ура! Наконец-то в webkit появилась поддержка переменных в CSS. Это очень круто!

К сожалению, я пока не смог увидеть воочию все перелести переменных в ночных сборках Webkit (возможно я что-то и упустил), но факт остается фактам - Webkit теперь поддерживает переменные в CSS. При этом остаются ярые противники внедрения переменных в язык. Они утверждают, что это противоречит сути каскадных таблиц стилей. Но W3C внесло предложение стандарта использования переменных и современные браузерные движки начали реализовывать этот стандарт. Так что движуха началась!

Поговорим о синтаксисе. Согласно W3C идея переменных состоит в слдующем - вы объявляете переменную (одновременно присвоив ей какое-либо значение), а затем, при необходимости, используете ее.

Приведу пример задания значения переменной my-color. Эта переменная будет глобальной (и поэтому будет находиться в секции :root).

:root {
  var-my-color: #fad;
}

Использовать переменную надо так:

.thing {
  color: var(my-color);
}

После такого использования объекты класса .thing будут иметь цвет #fad.

У вебкита есть некоторая особенность использования переменных - использования фирменного префикса webkit-. В этом случае вышеобозначенный пример будет выглядеть следуюзим образом:

:root {
  -webkit-var-my-color: #fad;
}

.thing {
  color: -webkit-var(my-color);
}

По этой ссылке можно увидеть другие примеры использования переменных.

И немного о будущем. Со временем использование переменных станет чуточку проще. Например, согласно стандарту для получения значения переменной можно будет использовать знак $ заместо var(). И это уже смахивает на наш любимый php:

:root {
  var-my-color: #fad;
}

.thing {
  color: $my-color;
}

PS

Это мой первый перевод, жду от вас конструктивной критики:)