Переменные CSS

Назовите одну функцию, которую вы хотели бы видеть в CSS. Поднимите руки те, кто хочет переменные … (я уверен, что некоторые из вас нуждаются в коренных селекторах, и вы не в меньшинстве!)

Вопрос связан с нашей потребностью неоднократно повторно использовать тот же цвет или значение стилей. Например, ниже в коде CSS указан один и тот же цвет #334 для разных свойств:

section {
border-color: #334;
}
     h1 {
color: #334;
}
     p {
background-color: #334;
}

Обслуживание кода CSS сложнее, чем это должно быть. Нам, как веб-разработчикам нужно помнить целый ряд значений и цвета hex/RGB или постоянно для цвета элемента применять значение #334. А если вам нужен цвет #074195 или в некоторых местах значение RGB (21,21,2 ). Страница с «Название цветов CSS3» поможет нам, при написании таблицы CSS, а если нет доступа к интернету? Все цвета трудно запомнить, переменные CSS могут решить эту проблему. Мы определим цвет #334 в качестве одной переменной и можем использовать этот цвет по всему коду CSS. Это первый признак в CSS  реализации предварительного компилирования.

Например, в LESS уже существуют переменные:

@mycolor: #334;
    section {
border-color: @mycolor;
}
    h1 {
color: @mycolor;
}
    p {
background-color: @mycolor;
}

или переменные в SASS:

$mycolor: #334;
    section {
border-color: $mycolor;
}
    h1 {
color: $mycolor;
}
    p {
background-color: $mycolor;
}

К счастью, скоро переменные будут поддерживаться браузерами. В проекте спецификации W3C на странице http://www.w3.org/TR/css-variables  показано, как мы можем писать код CSS3 с переменными когда производители браузеров начнут реализовывать поддержку переменных CSS3. Согласно документу W3C, любое свойство переменной будет начинаться с префикса ‘var-’.

Например:

:root {
      var-mycolor: #334;
}
    section {
border-color: var(mycolor);
}
    h1 {
color: var(mycolor);
}
    p {
background-color: var(mycolor);
}

Может быть, это не такой короткий код, как у LESS или SASS, но это большой шаг вперед, который позволит облегчить обслуживание CSS.

Заключение

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