User-defined colors in CSS?

[Doug Miller]

I'm developing a style sheet for dropdown/flyout menus, using different colors
for the different functions (base nav bar, dropdown, flyout, hover, etc), and
finding the need to keep specifying the same hex codes in many different
places, e.g.

.navbutton {
background: #451604;
border:solid #451604;
...
}

.navbutton:hover .dropdown li a {
border:solid #451604;
color:#451604;
...
}

and so on for various colors and various functions.

Is there any way to define my own color name, say, "base_button_color", so
that the style sheet could say something like

#define base_button_color=#451604;
.navbutton {
background: base_button_color;
border:solid base_button_color;
...
}
etc.?

 

[Doug Miller]

No, unless you preprocess your CSS with something.

That's what I was afraid of. Too bad. And thank you. Even though that's not
what I wanted to hear. :-(

 

[Neredbojias]

I'm developing a style sheet for dropdown/flyout menus, using
different colors for the different functions (base nav bar, dropdown,
flyout, hover, etc), and finding the need to keep specifying the same
hex codes in many different places, e.g.

navbutton {
background: #451604;
border:solid #451604;
..
}

navbutton:hover .dropdown li a {
border:solid #451604;
color:#451604;
..
}

and so on for various colors and various functions.

Is there any way to define my own color name, say,
"base_button_color", so that the style sheet could say something like

#define base_button_color=#451604;
navbutton {
background: base_button_color;
border:solid base_button_color;
..
}
etc.?

Use classes. Multiple classes can be applied to single elements and if
you define your classes appropriately, you can do what you want.

 

[dorayme]

That's what I was afraid of. Too bad. And thank you. Even though that's not
what I wanted to hear. :-(

Perhaps next best thing - depending on your motivations in the first
place - instead of "#451604" in your CSS, you always prepare:

#451604; /* base_button_color*/

and paste it where you want in the CSS.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed (e-mail address removed) (Doug Miller)
writing in

That's what I was afraid of. Too bad. And thank you. Even though
that's not what I wanted to hear. :-(

You know, you can always use a server side process like PHP. I'm doing
something like this:

<?php
header("Content-type: text/css");
$about = "#336699"; //bluish
$news = "#669999"; //greenish
$projects = "#3e4e0f"; //brownish
$volunteer = "#888751"; //dark gold
$links = "#663333"; //dark blue
$contact = "#996633"; //brown
$house = "#800080";//purple - my favorite!
$newsletters = "#669999"; //greenish
$places = array
("about","news","house","projects","volunteer","links","contact","newsle
tters");
$color = array("#336699","#669999","#800080","#3e4e0f","#888751","#
663333","#996633","#669999");
for($c=0;$c<count($color);++$c)
{?>
h2.<?php echo $places[$c];?> {
border-bottom:3px solid <?php echo $color[$c]; ?>;
background-image: url(<?php echo $places[$c];?>.gif);
}
#nav ul li.<?php echo $places[$c];?> a.<?php echo $places[$c];?>:link {
color:<?php echo $color[$c]; ?>;
}
#nav ul li.<?php echo $places[$c];?> a.<?php echo $places[$c];?>:visited
{
color:<?php echo $color[$c]; ?>;
}
#nav ul li.<?php echo $places[$c];?> a.<?php echo $places[$c];?>:hover {
color:<?php echo $color[$c]; ?>;
background-image: url(<?php echo $places[$c];?>_hover.gif);
background-repeat: no-repeat;
background-position:right;
}
#nav ul li.<?php echo $places[$c];?> a.<?php echo $places[$c];?>:active,
#nav ul li.<?php echo $places[$c];?> a.thispage {
color:#336699;
background-image: url(<?php echo $places[$c];?>.gif);
background-repeat: no-repeat;
background-position: right;
}

<?php } ?>