*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.

Share This Now:

Add a Comment

Your email address will not be published. Required fields are marked *