define colors as variables in CSS

Question

Hi all,

I'm working CSS file which is quite long. I know the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables so I can just change them to have the new color applied to all elements that use it?

Please note I can't use php to dynamically change the css file.

Answer 1

CSS itself doesn't use variables. However, you can use another language like SASS to define your styling using variables, and automatically produce CSS files, which you can then put up on the web. Note that you would have to re-run the generator every time you made a change to your CSS, but that isn't so hard.

Answer 2

There's no easy CSS only solution. You could do this:

• Find all instances of background-color and color in your CSS file and create a class name for each unique color.

  .top-header { color: #fff; }

  .content-text { color: #f00; }

  .bg-leftnav { background-color: #fff; }

  .bg-column { background-color: #f00; }

• Next go through every single page on your site where color was involved and add the appropriate classes for both color and background color.

• Last, remove any references of colors in your CSS other than your newly created color classes.

Answer 3

Not PHP I'm afraid, but Zope and Plone use something similar to SASS called DTML to achieve this. It's incredibly useful in CMS's.

Upfront Systems has a good example of its use in Plone.

Answer 4

The 'Less' Ruby Gem for CSS looks awesome.

http://lesscss.org/

Answer 5

There is a way to do it all client-side, but it's not considered good programming. So before anyone jumps all over the vote-down button, please note I'm acknowledging that it's not good programming. Please also note that sometimes in order to achieve a desired effect it is easiest to step outside the bounds of 'good programming'. User discretion is advised. :)

Define some css class that are used only for colors, like so :

.blue_background {
   background-color:blue;
}
.red_foreground {
   color:red;
}

Then in the html of whatever element you want to be that color just add one of the color classes:

<p class="red_foreground">hello</p>

If the element already has a class or needs two of the color classes, elements can have multiple classes. Just separate with a space:

<p class="red_foreground blue_background etc">hello</p>

Answer 6

You could pass the CSS through javascript and replace all instances of COLOUR1 with a certain color (basically regex it) and provide a backup stylesheet incase the end user has JS turned off

Answer 7

I'm not clear on why you can't use PHP. You could then simply add and use variables as you wish, save the file as a PHP file and link to that .php file as the style sheet instead of the .css file.

It doesn't have to be PHP, but you get what I mean.

When we want programming stuff, why not use a programming language until CSS (maybe) supports things like variables?

Also, check out Nicole Sullivan's Object-oriented CSS.

Answer 8

You could put a comment in the css before each colour in order to serve as a sort of variable, which you can change the value of using find/replace, so...

At the top of the css file

/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

box background colour       bbg              #567890
box border colour           bb               #abcdef
box text colour             bt               #123456

*/

Later in the CSS file

.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}

Then to, for example, change the colour scheme for the box text you do a find/replace on

/*bt*/#123456

Answer 9

wro4j java framework has a feature for supporting css variables: http://code.google.com/p/wro4j/wiki/CssVariablesSupport Besides that, you can merge your resources (both: css & javascripts) into a single file & minimize them using a built in or custom minimization processor and many other features.