Question

Possible Duplicate:
Avoiding repeated constants in CSS

I want to include a class within a class – sort of like variablizing a class – so that I can define something once and use it throughout the sheet. If I change the color, it changes everything.

.myFontColor{color:blue;} .myTitle{font-size:large; myFontColor} .myHeader{font-weight:bold; myFontColor} 

The only way I see to do this is. To include every class name in the definition, but if I have 20 or 30 items in the sheet referring to that color, it’s going to get ugly really fast.

.myFontColor, .myTitle, .myHeader{color:blue;} .myTitle{font-size:large;} .myHeader{font-weight:bold;} 

or to list a each class when I create an element, which gets a little messy too.

<div class='myFontColor myTitle myHeader'> 

Thanks for your help.

Answer 1

The only way I can think of would be using javascript to dynamically assign the attributes. For example, make a list of all the attributes that you want to configure (such as color, font-size, font-weight) and a list of all the classes you want to be configurable (such as .myHeader, myTitle, etc). Then do something like this:

for (x=0; x< cssClasses.length; x++) {   addAttribs(cssClasses[x]); }  function addAttribs(class) {    $('.' + class).css('color','#444');    $('.' + class).css('font-weight','bold');    //And so on.. } 

This may be the closest you can get, and it will have the advantage of all the attributes stored in one function, so if you change it there it will be updated everywhere else.

Edit: By the way, I’m using Jquery in the addAttribs() function to easily access and set the css attributes.