Using CSS @Variables

Question

I am trying to use CSS Variables. I look online for tutorials and all of them worked so far.

Here's my CSS:

@variables {
 defaultColor: #8E5050;
 defaultBackGround: #E1DBC3;
}
body {
 background: var(defaultBackGround);
}
a {
 color: var(defaultColor);
}

I also tried:

body {
 background: @defaultBackGround;
}
a {
 color: @defaultColor;
}

None of them works, What am I doing wrong? Thanks

Possibly because support for them is very limited and they are only a proposal at this stage after 3+ years. There's a reason you can't find much information on them. Look at the suggested CSS preprocessors that Petah mentioned. — Doozer Blake, Sep 28 '11 at 12:21
You're just missing the double dash prefix `--` e.g. `--defaultColor: #8E5050;` and to use that variable `background: var(--defaultBackGround);` — Dave Everitt, Feb 03 '18 at 13:14
@DaveEveritt this was an old question, CSS variables and custom proprieties were not a thing back then! There's now a [answer](https://stackoverflow.com/a/20830842/3537581) down below about native variables. — Salim Mahboubi, Mar 16 '18 at 21:26

score 20 · Accepted Answer · edited Aug 07 '13 at 15:21

20

I would use a CSS preprocessor such as Sass or Less.

edited Aug 07 '13 at 15:21

Vukašin Manojlović

2,645
2
21
26

answered Sep 28 '11 at 12:18

Petah

45,477
28
157
213

Also you could take a look at the CSS Variable Shim @ http://cssvariables.com – Brandon.Staley Jan 21 '14 at 17:33
1

checkout blog http://www.toobler.com/blog/finally-css-variables-arrived – Hunter Oct 26 '16 at 18:30

score 8 · Answer 2 · answered Sep 28 '11 at 12:23

The variables you are using are not part of the normal CSS specification. It looks like you are writing in some CSS framework.

If you do want to use pure CSS, you are stuck with setting the values of colors / margins / padding manually every time. But a good "Search & replace"-function in your favorite text editor may help you there. :)

If you want to use these variables, @Petah has the right answer for you. :)

Toastrackenigma · Answer 3 · 2017-07-29T05:02:17.133

5

Use Native CSS3 Variables!

Variables are actually a native feature in CSS3 - you can read the spec at MDN. However, they are still a relatively new feature, so you may want to check out the Browser Support charts here before using them.

That being said, CSS Variables are supported by the latest versions of Chrome, Firefox, Opera, Safari and Microsoft Edge.

The following code shows an example of how CSS variables can be used:

:root {
    --name: #ff0000;
}
p {
    color: var(--name);
}

How does this work?

Variables can be used if they are defined on the parent container of the element - here I use :root so that the variable is accessible everywhere.

A variable can be defined using --name:content; where name is the name of the variable and content is the contents of the variable (this can be a color, like #ff0000, a size like 1em, or one of many more possible values).

Then, simply use var(--name) instead of a property in your CSS code, where name is again the name you called the variable.

edited Jul 29 '17 at 05:02

answered Dec 29 '13 at 22:32

Toastrackenigma

7,604
4
45
55

Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Otherwise, your answer becomes useless in case the link dies. Moreover, the document linked doesn't give a compatibility matrix. Are there limitations when it comes to browser support? – Izzy May 30 '14 at 08:53
Edited to include an example piece of code, explanation on how to use them and browser support (for more info on the browser support situation visit [http://caniuse.com/#search=variables](http://caniuse.com/#search=variables). – Toastrackenigma May 31 '14 at 04:35
Thanks a lot! As I was afraid, nothing that works across browsers. You example looks like from the "older draft", where the `var-` prefix has been replaced by `--` meanwhile. Also, some references have the root element named `:root`, others `::root`. Some say use `var(name)` (like in your example), and match that "cross-browser" (from `var-name`, `-webkit-var-name`, etc), the current draft writes `var(--name)` and doesn't allow for different (browser-specific) declarations. I'm pretty confused. Nothing ripe for use yet. – Izzy May 31 '14 at 09:49
For a reference on what I wrote with the different notations and the draft, please see [Creating CSS Global Variables : Stylesheet theme management](http://stackoverflow.com/q/15831657/2533433): root element is `::root`, variables are prefixed by `--` and have to be passed to `var()` using their *full* name. What the OP mentions there corresponds to the W3C draft. – Izzy May 31 '14 at 09:52
Yeah, the spec is kinda sketchy and I think that W3C have plans to change some parts of it but it will be quite cool when they finish. Anyway, glad I could help :) – Toastrackenigma Jun 08 '14 at 02:19
checkout blog http://www.toobler.com/blog/finally-css-variables-arrived – Hunter Oct 26 '16 at 18:31
2

@Izzy: The only times I've ever seen anyone refer to :root as ::root were when they mistakenly believed it was a pseudo-element and not a pseudo-class. :root is a pseudo-class, and has always been - it makes no sense for it to be a pseudo-element, because the root element is just that - an *element*. – BoltClock Jul 29 '17 at 05:27
But Izzy is right in that there has never been any evidence of vendors prefixing custom properties (other than, *perhaps*, www-style discussions brainstorming how to implement them experimentally) - by the time vendors began *implementing* them, everyone had already agreed never to use prefixes for experimental standards again. – BoltClock Jul 29 '17 at 05:33
@BoltClock In [one of the first articles](http://css3.bradshawenterprises.com/blog/css-variables/) about the original spec, all of the markup was vendor prefixed, and I believe the original, flagged Chrome / Firefox implementations did use prefixes?? Hence, the other answer on this page vendor prefixes them too. The spec and implementations have changed a lot since then, and I have tried to edit this answer periodically to keep it up to date. The spec is now final (I believe), and implemented across all major browsers, and my latest edit reflects this - all code in it at this point is valid. – Toastrackenigma Jul 29 '17 at 06:03
That article appears to simply be speculating on how the experimental implementations would be used - very much like [this article](https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit) (originally from html5rocks.com) that lists a bunch of prefixes for position: sticky that have mostly never existed, simply out of the *assumption* that that's how it would be implemented experimentally. No implementation of any version of css-variables has actually used vendor prefixes, at all. – BoltClock Jul 29 '17 at 06:13

score -2 · Answer 4 · answered Mar 03 '14 at 15:10

-2

From what I understand, variables aren't fully supported yet, but this is how you will set them when they are:

/* declare in :root with the usual browser prefixes */
:root {
  var-myVariableColor: #f00;
  -webkit-var-myVariableColor: #f00;
  -moz-var-myVariableColor: #f00;
  -ie-var-myVariableColor: #f00;
}

/* to reference encase in var() */
body {
  background-color: var(myVariableColor);
}

answered Mar 03 '14 at 15:10

Dave Maison

383
1
13

So what about compatibility? Your example suggests it works at least with Firefox, Webkit browsers, and MSIE. [This Mozilla doc](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) suggests otherwise (only FF29+), and even gives a slightly different syntax. – Izzy May 30 '14 at 08:50
the syntax is wrong here, see this answer: https://stackoverflow.com/a/23983026/123033 – Dave Everitt Feb 03 '18 at 13:13
1

That's correct @DaveEveritt. When I wrote this post 4 years ago, that was the syntax for the old spec (http://css3.bradshawenterprises.com/blog/css-variables/) The toastrackenigma's post contains the correct, up-to-date answer – Dave Maison May 22 '18 at 14:39

Using CSS @Variables

4 Answers4

Use Native CSS3 Variables!

How does this work?

Linked