Why don't my CSS variables work?

I was working with CSS variables for the first time and I can't get it to wor开发者_StackOverflow中文版k. I implemented it on Chrome and triple checked my code.

@default: red;
#myDiv {
color: @default;
}
<div id="myDiv">Hello World</div>

Unfortunately css doesn't natively support variables but there are libraries out there that enhance css syntax to allow you to use variables and the like. The most popular ones being Less and Sass which Matt Bell mentioned.

Basically what they do is parse the file you write, and output one where all the css variables and functions you use are compiled into a valid CSS file which you can include/use in your webpage.

http://sass-lang.com/
http://lesscss.org/

The official W3C CSS specifications:
http://www.w3.org/TR/CSS/

EDIT:

Since originally answering this years ago things have changed. CSS variables are now part of the specification

For documentation / explanation check out the excellent MDN article.

For current/up-to-date support and statistics check out caniuse.com.