10

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

Improve this question
3
  • 5
    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. Commented Sep 28, 2011 at 12:21
  • 1
    You're just missing the double dash prefix -- e.g. --defaultColor: #8E5050; and to use that variable background: var(--defaultBackGround); Commented Feb 3, 2018 at 13:14
  • 1
    @DaveEveritt this was an old question, CSS variables and custom proprieties were not a thing back then! There's now a answer down below about native variables. Commented Mar 16, 2018 at 21:26

4 Answers 4

Reset to default
20

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Also you could take a look at the CSS Variable Shim @ cssvariables.com
checkout blog toobler.com/blog/finally-css-variables-arrived
8

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. :)

Improve this answer

Comments

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.

Improve this answer

10 Comments

Whilst this may theoretically answer the question, it would be preferable 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?
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.
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.
For a reference on what I wrote with the different notations and the draft, please see Creating CSS Global Variables : Stylesheet theme management: 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: 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.
|
-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);
}
Improve this answer

3 Comments

So what about compatibility? Your example suggests it works at least with Firefox, Webkit browsers, and MSIE. This Mozilla doc suggests otherwise (only FF29+), and even gives a slightly different syntax.
the syntax is wrong here, see this answer: stackoverflow.com/a/23983026/123033
That's correct @DaveEveritt. When I wrote this post 4 years ago, that was the syntax for the old spec (css3.bradshawenterprises.com/blog/css-variables) The toastrackenigma's post contains the correct, up-to-date answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.