текущий статус [обновление в декабре 2015]

W3C выдал черновик о переменных CSS всего через месяц после того, как этот ответ был отредактирован в последний раз. И в этом месяце довел этот проект до рекомендации кандидата. Он будет оставаться в обзоре по крайней мере до июня 2016 года. А тесты доступно.

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

A свойства - любое свойство, имя которого начинается с двух тире (U + 002D дефис-минус), например --foo. The <custom-property-name> производство соответствует этому: он определяется как любой допустимый идентификатор, который начинается с двух дефисов. свойства предназначены исключительно для использования авторами и пользователями; CSS никогда не даст им смысла за пределами того, что представлено здесь.

пример 1

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

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

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

в отличие от других свойств CSS, имена пользовательских свойств чувствительны к регистру.

эта функция реализована только в Firefox и Chrome на данный момент, и это (вероятно) займет довольно много времени, пока он не будет реализован в текущих браузерах.

старый ответ от 2012

это оригинальный ответ с марта 2012 года. Он предваряет как" официальный " проект W3C, так и экспериментальные реализации браузера.

почему переменные CSS не находятся в CSS 1 или 2?

EDIT: этот вопрос уже был задан Хокону Вюму ли, отцу CSS (Opera Watchblog (Wayback машина)):

Берни Циммерман: Håkon, Почему CSS не поддерживает константы? Например, возможность присвоить константе значение RGB, смогл сделать обслуживание таблицы стилей очень более управляемым. Это была просто оплошность?

Хакон: нет, мы думали об этом. Правда, это сэкономило бы немного времени. Однако, есть и некоторые минусы. Во-первых, синтаксис CSS был бы более сложным и более похожим на Программирование. Во-вторых, какова будет область действия константы? Файл? Документ? Почему? В конце концов мы решили, что не стоит.

так это не в стандарте, потому что они думали ... --28-->не стоит.

решения

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

когда несколько селекторов используют одни и те же объявления, они могут быть сгруппированы в разделенные запятыми список.^{в CSS2:группировка}

поэтому вместо использования цвета в десяти селекторах часто лучше собирать общие объявления и складывать их вместе. Вместо

.header{
    color: red;
}
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}
.footer{
    color: blue;
    border: 1px solid blue;
}

использовать

/* Color definitions */
.header,
.section:nth-of-type(2n) > .ridi.culous > .article:hover{
    color: red;
}

.footer{
    color: blue;
}

/* border definitions */
.footer{
    border: 1px solid;
}

использовать наследование, когда это возможно.

обратите внимание, что вы можете объявить почти какая-то переменная, если вы используете абстрактные/простые классы, такие как

.margin5em{
    margin: 5em;
}
.corporateIdentityBackgroundColor{
    background-color: #881200;
}
.corporateIdentityBackgroundImage{
    background-image: url(we/are/awesome/corporation);
}
.backgroundCenter{
    background-position: center center;
}
.backgroundNoRepeat{
    background-repeat: no-repeat;
}

это позволит вам использовать

<div class="corporateIdentityBackgroundImage backgroundCenter backgroundNoRepeat">Ridiculos long class names</div>
<div class="article">
  <p class="margin5em">Yesterday I found a new hobby: Creating class names that are longer then most common words.</p>
</div>

Читайте также:

• http://icant.co.uk/articles/cssconstants/