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/

Joseph Silber · Accepted Answer · 2013-02-15 19:08:56Z

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, 2013 at 19:08

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

3 Comments

BlueChameleon Over a year ago

This is exactly what I need! Let me go research it. Thanks

Lokerim Over a year ago

@BlueChameleon: If this is your accepted answer, please designate it as such.

BlueChameleon Over a year ago

I will. It wont let me for another 4 minutes.

Collectives™ on Stack Overflow

Reuse CSS class

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related