gregdoolittle.com

i had an idea a while back. basically i wanted to include variables in my CSS. the point was to extend the ease of updating a site’s style.

in a CSS document you usually use the same color value for multiple elements. when you want to update the color scheme of your site’s design, you have to do a find-and-replace for all occurrences of the old color, swapping it out with the new color. instead of updating every instance of a color, an image URL, or a typeface, imagine how easy it would be to do if you could just update your variables which you had declared at the top of your document.

i thought i had a great original idea. i had even tried implementing it with JavaScript, but to no avail. tonight i was brushing up on the SiFR type technique, when i came across “my idea”, implemented and documented by Shaun Inman. basically, he’s figured out how to do exactly what i thought i invented, and named it: CSS-SSC.

this is the basic syntax:


@server constants {
constantName1: constantValue1;
constantName2: constantValue2;
}

selector {
property1: constantName1;
property2: constantName2;
}

you can also import the constants from an external file:

@server url(constants.css);


if this interests you, read the full article. it looks like in addition to using this syntax for variables, you will also need to add a special PHP script to your CSS directory, and tell your server to parse your CSS files using the PHP interpreter by modifying the .htaccess file.