Can I define variables in CSS?

[the_nerd]

In a CSS file you use certain settings (color, font,..) in different places. Is there a way to define something like "color1=#123456" and then use that in a class definition?

I admit, that's a RTFM question, but sometimes you're just lazy ....

Thanks, nerd.

[benihana]

you can do it with php, provided you:

a) set the server up to parse css as php

and

b)send the correct headers

<?php Header ("Content-type: text/css");?>

[mincklerstraat]

answer is basically no + but, the but being:
You can just go through your classes and define them as you normally would, and then have a declaration at the end

div.a, div.b, h1.someotherclass, div.a strong {
color: #123456;
}

And that will set all of these elements, or elements following the patterns you set (like div.a strong meaning all strongs in div class="a") to your desired color. This is part of the 'cascade' which is what makes cascading ss so powerful - so go ahead and r that f m anyways, you'll keep getting better the more you r the f m. F stands for friendly, right?

[marek]

Clever use of cascading is a one way, multiple classes another one. The multiple classes look like this:

<p class="class1 class2>...</p>

In such a case both classes apply.

[createErrorMsg]

CSS doesn't take variables, itself, but you can use "poor man's variables" if you're just trying to save coding time or easily swap out colors...

Use a short, easy to type substitute for each color. Choose something that won't possibly crop up in any other context within a CSS file, something like...

q1 for #123
q2 for #456
q3 for #789

Then when you're finished writing the CSS file, use Find and Replace in your text editor to swap in the hex values.

Keep a log of your substitutions and hex numbers in a comment at the top of the CSS and you can make site wide color scheme changes using nothing fancier than Notepad (or, if you're a sophistocrat like me, Notepad 2!).

cEM

[the_nerd]

F stands for friendly, right?

FU ... nny ;-)

[the_nerd]

Then when you're finished writing the CSS file, use Find and Replace in your text editor to swap in the hex values.

Good idea, thanks! Problem might be that after replacing all traces of my "variable" are gone ..

would p {mycolor1:; color:#123456;}

be parsed "correctly" by all browsers(ignoring "mycolor1:;")? That way I could always find "mycolor1:; color:#......" and replace it with the color I like.

nerd

[createErrorMsg]

would p {mycolor1:; color:#123456;}

be parsed "correctly" by all browsers(ignoring "mycolor1:;")?

Probably, but it definitely wouldn't validate.

If you wanted to keep track right in the code, you can use comments...

SELECTOR {
color: /*mycolor1*/#123;
}

Then Find and Replace on the string "/*mycolor1*/#123", although this isn't really saving you any keystrokes. Another option is to just keep track in a comment at the top of the file.

/*COLOR1 - q1 #123 #456 #789*/

Anytime you swap a color, add the hex to the list so that the last color in the list is always the last one you tried. Then when you need to change it again, you Find and Replace on the last hex number in the list. You can even add descriptors...

/*COLOR1 - q1 #fff(white) #000(black) #987(tan)*/

But I would avoid using invalid code, whether it's ignored or not.

cEM