# First of all I would like to specify the condition that…

*Firefox 29 supports(only) if you set layout.css.variables.enabled = true in about:config.

# That asterisk sign in the title is for this condition.

# First Firefox Nightly started to support CSS Variables.. Post then It’s arrived in Firefox 29.

How can I use variables in CSS in Firefox?

# First of all You’ve to check that, Your Firefox version is 29 or not… If yes then okay else you’ve to update it to 29. You can check via Help > About Firefox… Or you can see that Three Line Menu Icon in Firefox 29 so if it’s three line icon on Firefox don’t worry it’s updated.

# Next You’ve to type about:config in your Address bar of Firefox.

Click to Zoom

# Then hit Enter. Again press Enter on that button Says “I’ll be careful, I promise!“. Then seach for layout.css.variables.enabled and check the value, if it’s true, no problem else you’ve to set true and now you can use variables in CSS.

# You need a demo right?

What’s the syntax for this?

Syntax: Just write var then – then variable-name and declare it to selector like :root or html . And use it as like…

Update: Syntax: Write — then variable name and declare it to a selector like :root or html And use it as like..

:root {

–bg-color: #444;

}

body {

background: var(–bg-color);

}

Large Example:

@import url(http://fonts.googleapis.com/css?family=Nunito:300); * { margin: 0; padding: 0; } :root { --body-bg: #333; --color: hotpink; --color2: orange; --font-size: 1.3em; --top-bottom-padding-size: 0.2em; } body { background: var(--body-bg); font-family: 'Nunito', sans-serif; font-size: var(--font-size); } h1, h2, h3, h4, h5, h6 { --color: yellow; color: var(--color); text-align: center; margin: var(--top-bottom-padding-size); } .info { bottom: var(--top-bottom-padding-size); color: var(--color2); position: absolute; right: var(--top-bottom-padding-size); } .info a { color: var(--color); } .breaking-news { text-align: center; color: var(--color); } .breaking-news code { color: var(--color2); padding: var(--top-bottom-padding-size); font-family: inherit; font-weight: bold; }

# So now you can play with CSS Variables. Thanks.