Re: Inheritance, variables and CSS

Giganews Newsgroups
Subject: Re: Inheritance, variables and CSS
Posted by:  Trevor L (tand…@homemail.com.au)
Date: 31 Jan 2006

Giggle Girl wrote:
> I have inherited a stylesheet that has many of the same values over and
> over.  Can you use a variable in CSS so I only have to hardcode a
> border color once, for instance?
>
> Here is a snip from the current sheet:
>
>     .outlook_borderRight1
>     {
>      border-right: #ff9900 solid 2px;
>     }
>
>     .outlook_borderBottom1
>     {
>      border-bottom: #ff9900 solid 2px;
>     }
>
>     .outlook_borderIFrame
>     {
>      border-top: #ff9900 solid 2px;
>      border-left: #ff9900 solid 2px;
>      border-right: #ff9900 solid 2px;
>     }
>
> Since "ff9900" is used over and over, can I just set it once somewhere?
>  Like
>
> var BORDER_Tabulated_Result : #ff9900;
>
>     .outlook_borderBottom1
>     {
>      border-bottom: BORDER_Tabulated_Result solid 2px;
>     }
>
> I know my syntax is wrong, but you (hope, hope) get the idea.
>
> Can using "variables" be done?
>
> Thanks,
> Ann
> PS: I am a backend programmer, who is new to CSS.

As others have replied, there are no variables in CSS. And people get
upset when you call it a language or even use the phrase "programming"
for CSS.

But the purists can enjoy making objections as much as they like. All
you really want to know is how to *use* CSS to achieve what you want to
do

You could try this
..outlook_borderRight1 , .outlook_borderBottom1 , .outlook_borderIFrame
        {
        border-right: #ff9900 solid 2px;
        }
..outlook_borderIFrame
        {
        border-top: #ff9900 solid 2px;
        border-left: #ff9900 solid 2px;
        }
which is quite valid CSS

This is part of the cascading rule.

A border-right style has been defined for .outlook_borderIFrame, so
this cascades into the lower defintion of .outlook_borderIFrame

In effect the style for .outlook_borderIFrame is
        {
        border-right: #ff9900 solid 2px;
        border-top: #ff9900 solid 2px;
        border-left: #ff9900 solid 2px;
        }
whereas that for .outlook_borderRight1 and  .outlook_borderBottom1 is
        {
        border-right: #ff9900 solid 2px;
        }

I think this is what you want.

Replies

None

In response to

Inheritance, variables and CSS posted by Giggle Girl on 31 Jan 2006