Назовите одну особенность, которую вы хотели бы видеть в CSS. Поднимите руки тех, кто хочет переменные … (Я уверен, что некоторые из вас отчаянно нуждаются в родительских селекторах, но вы в меньшинстве!)
Проблема связана с нашей необходимостью использовать и повторно использовать одни и те же цвета и другие значения в таблице стилей. Например:
section { border-color: #334; }
h1 { color: #334; }
p { background-color: #334; }
Техническое обслуживание сложнее, чем это должно быть. Нам нужно запомнить диапазон значений hex / RGB, и, неизбежно, привередливый клиент или дизайнер решат, что № 335 — «на бренде». Поиск и замена могут работать, но не в том случае, если вы использовали # 333344 в некоторых местах или rgb (21,21,2c) в других.
Переменные CSS решают проблему. Вы определяете # 334 как одну именованную переменную и используете ее в своем коде. Обычно это первая функция, реализованная в прекомпиляторах 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; }
К счастью, собственные переменные CSS скоро появятся. На сайте http://www.w3.org/TR/css-variables/ находится черновик спецификации W3C, в котором показано, как мы можем писать код CSS, когда поставщики начинают внедрять поддержку.
Согласно документу, любое имя свойства, начинающееся с префикса ‘var-‘, является свойством переменной. Например:
:root
{
var-mycolor: #334;
}
section { border-color: var(mycolor); }
h1 { color: var(mycolor); }
p { background-color: var(mycolor); }
Возможно, это не так кратко, как LESS / Sass, но это большой шаг вперед, который облегчит проблемы обслуживания, с которыми мы все столкнулись.
Это захватывающее развитие, но не задерживай дыхание. Нет гарантии, что он будет принят всеми поставщиками, и, даже если они это сделают, эта функция не будет обратно совместимой со старыми браузерами. Тем не менее, нашим правнукам это понравится.