*Firefox 29 and Firefox Nightly supports variables in CSS

Last Updated on 20th September 2014.
# 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?

See the Pen Firefox Nightly supports CSS variables. by Kaushalya Mandaliya (@kman) on CodePen.

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.

Also Read

Links: Working Draft On W3C | Firefox 31 change[Developer Notes]

Labels: , ,