Global CSS Color Scheme / Skin

Question

I am constucting a site using CSS that needs to be skinnable / brandable. In technical terms, for each "brand" I have a set of five color values in a database.

What I want to do is construct CSS files so that the color scheme of the entire site is unified and the colors are reused, so I can change the value in one place and it changes the entire site. The concept would look like this:

.SiteBaseColor {color:sienna;}

p {font-size: 50; color:SiteBaseColor;}

Is there a way to accomplish something like this?

Answer 1

Why don't just write 6 css files? One for all the content (without the scheme-color) and one per color. Then you just include the one you need.

The same if you generate it by php, just make 5 different entry-point for schemas and include the right one...

Answer 2

Sadly, CSS does not support variables. You would have to use a CSS pre-processor like Less or xCSS, or use PHP snippets:

<? $ourColor = "#FF0000"; ?>

.....
div.content { color: <?php echo $ourColor; ?> }

Answer 3

If you want to investigate the preprocessor choice ( my favourite for this case) I agree with Pekka, but my choice would be sass which, i think, is powerful than less..

Using a css preprocessor you can write one sass file ad than compile it in 6 different css files just changing color variables each time...

But, if you've to pull the colors from a database maybe it simpler to use php snippets in the css file..