Referencing specific color in CSS file

Question

I use the same 3-4 colors on 99% of the elements on my website. I know of absolutely no way this is possible, but I'd thought I would ask.

Is there any way to specify a color and quickly reference it within other elements further down the page? For example:

.red_color {
  color: #FF0000;
}

Now, further down the page we have other elements:

div.example {
  padding: 10px;
  color: [REFERENCE ABOVE] 
}

This way, if the color ever changes, I can update it in one place and all the other elements will follow suit.

I know it is possible if I list all the elements in one place, like:

div.example, div.other_example, p {
  color: #FF0000;
}

But this way, every time I add another element to the stylesheet, I have to remember to add it to this list.

Any other ways of doing this?

Thanks.

Why not just specify a class with a specific color and add that class to all DIVs you want to use that color? It will have the same effect. — APAD1
– APAD1, Commented May 5, 2014 at 16:05
you don't always have control over markup, so adding a class isn't always possible. — JesseEarley
– JesseEarley, Commented May 5, 2014 at 16:07

JesseEarley · Accepted Answer · 2014-05-05 16:04:14Z

4

Yes, but not in CSS. Look at using LESS or SASS. Then you can define variables and use them as you're suggesting.

answered May 5, 2014 at 16:04

JesseEarley

1,04011 silver badges22 bronze badges

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

1 Answer 1