homepage Welcome to WebmasterWorld Guest from 54.205.207.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Can I define variables in CSS?
the_nerd

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5618 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5618 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5618 posted 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

10+ Year Member



 
Msg#: 5618 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5618 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5618 posted 1:02 pm on Feb 6, 2005 (gmt 0)

F stands for friendly, right?

FU ... nny ;-)

the_nerd

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5618 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5618 posted 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