Reuse CSS class

Question

I should have asked this in my previous question (CSS style declaration reusage), but I didn't think of it at the time. Since that question is answered, I'll start a new one.

I am trying to create color palette in CSS that will be used through out my application. For example:

.blue  { color: #434544; }
.green { color: #G99933; }

I do not want to define colors anywhere else in my CSS. The problem I am running into is how do i use the .blue style when, for example, I need a background-color definition? Take a look at this:

.editor { background-color: #434544 }

I want to reference back to the .blue style instead of defining it here again. How can I do that?

UPDATE I found the perfect solution for my question: Chirpy -> http://chirpy.codeplex.com/

score 4 · Accepted Answer · answered Feb 15 '13 at 19:08

4

There's no way to do this in native CSS. You should look into pre-processing your CSS, since all those pre-processors have support for variables.

Here's what it looks like using (scss-flavored) SASS:

$blue: #434544;
$green: #G99933;

.blue  { color: $blue; }
.green { color: $green; }

.editor { background-color: $blue }

answered Feb 15 '13 at 19:08

Joseph Silber

214,931
59
362
292

This is exactly what I need! Let me go research it. Thanks – BlueChameleon Feb 15 '13 at 19:12
@BlueChameleon: If this is your accepted answer, please designate it as such. – Lokerim Feb 15 '13 at 19:14
I will. It wont let me for another 4 minutes. – BlueChameleon Feb 15 '13 at 19:18

Reuse CSS class

1 Answers1