Periodically, someone asks if CSS includes the ability to set constants or variables that can be reused throughout a sheet. The main usage of this is for declaring a color value once and being able to call it up in an unlimited number of rules. So, you could declare "branding-color is #f0a3b5" and then be able to write rules like this:
h1 {
color: branding-color;
}
a:hover {
color: branding-color;
}
Then, if the color changed, you would only have to change it in the original value declaration and not in every CSS rule it was called in. So, does CSS let you do this? No. CSS is not a programming language, so it doesn't include this type of logic. But there are some workarounds.
The simplest option is just to include the color value in every rule you want it in, and use search and replace when you want to change it. This is pretty trivial with a good text editor.
Since an element can have more than one class on it (see MultipleClasses), you can make classes for each constant or variable you want to create, then assign these classes to the (X)HTML elements you want to affect. Since an element can have more than one class on it, this shouldn't interfere with any existing uses of the class attribute.
for example:
.branding-color {
color: #f0a3b5;
}
and your (X)HTML:
<h1 class="branding-color">Heading text</div> ... <ul class="branding-color news"> <li>News text that shares same color as heading text.</li> </ul>
Then if you want to change the color, all you need to do is change the class definition.
The use of templating languages would make this easier than doing it in a regular editor.
"...e.g. In PHP (if you run PHP on the server, rather then before you upload the style sheet, make sure you have it output the correct content (MIME) type for your style sheet),"
<?php $dark = "#000000"; ?>
#foo {
background: <?=$dark?>
}
I could also imagin a PERL one-liner for inplace editing, but I want to test the syntax before putting it here.
The solution with a normal search and replace would have the advantage (or disadvantage) that regular color-codes could be used for quick developement and all of the identical codes would be changed. Also, inverting a color-scheme would require a "three-way-exchange" of values. (After changing original white to black, how could you change original black to white? So you need to change #fff to NU-BLACK, then #000 to #fff and then NU-BLACK to #000)
To change the MIME type of a ColdFusion (*.cfm) file to CSS:
<cfsetting showdebugoutput="no"> <cfcontent type="text/css; charset=UTF-8">
... and the same in JSP:
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<c:set property="contentType" target="${pageContext.response}" value="text/css" />
NB: with the JSP one I am not entirely sure of the use of 'target'
== Disadvantages ===