CSS variables

From RuntimeWiki

CSS variables would allow to define stylesheet-wide values identified by a token and usable in all CSS declarations. If a value is often used in a stylesheet - a common example is the value of the color or background-color properties - it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair. We expect CSS Variables to receive a very positive feedback from both the Web authors' community and browser vendors.

Below are samples. For explanations, refer to the spec:

@variables {
  CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
  background-color: var(CorporateLogoBGColor);
}

@variables {
  myMargin1: 2em;
}

@variables print {
  myMargin1: 2em;
}

.data, div.entry {
  margin-left: 30px;
  margin-left: var(myMargin1);
}

A preliminary spec is at:

• http://disruptive-innovations.com/zoo/cssvariables/

Latest builds of WebKit support this feature.