homepage Welcome to WebmasterWorld Guest from 204.236.255.69
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Can I define variables in CSS?
the_nerd




msg:1218160
 1:55 pm on Feb 4, 2005 (gmt 0)

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




msg:1218161
 2:01 pm on Feb 4, 2005 (gmt 0)

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




msg:1218162
 2:02 pm on Feb 4, 2005 (gmt 0)

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




msg:1218163
 12:23 am on Feb 5, 2005 (gmt 0)

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




msg:1218164
 3:00 am on Feb 5, 2005 (gmt 0)

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




msg:1218165
 1:02 pm on Feb 6, 2005 (gmt 0)

F stands for friendly, right?

FU ... nny ;-)

the_nerd




msg:1218166
 1:12 pm on Feb 6, 2005 (gmt 0)

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




msg:1218167
 3:28 pm on Feb 6, 2005 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved