Tough CSS problem - getting values from other properties?

Question

Hello,

I'm in a need of getting a value of another property in CSS. Say I have this in a CSS file:

.something {
 width: 256px;
}

then in something2 I want to use the value:

.something2 {
 width: .something.width;
}

how could I achieve this without JavaScript? The reason why I need this is because I'm using CSS 3 animation:

@-webkit-keyframes somethinghere {
    0% {
        background-position: -48px 0px;
    }
    100% {
        background-position: .something.width 0px;
    }
}

and the x value of the animation-end background I want to be the width of the "something". Is this possible to do in CSS (3)? Even if it's a draft spec or just one browser supporting it, I want to hear about it.

Thanks in advance.

Answer 1

CSS doesn't support variables yet. You can mimic it by using PHP in your stylesheet, though.

Answer 2

This is not possible with CSS. But you can achieve this with Sass or Compass.

Quote from Sass:

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.

Basically it is another language similar to CSS. These files are then compiled to CSS files. So you have one extra step to create CSS files, but the language you create them with is more powerful.

Answer 3

Yes, like FRKT said, this is not possible using only CSS, although there are other ways to accomplish this but not CSS. CSS is not a getter and setter for styles within itself.

Answer 4

try Shaun Inman's Server Side Constants, you can use it like this

@server constants {
    constantName: constantValue;
    }

selector {
    property: constantName;
    }

http://www.shauninman.com/archive/2005/08/09/css_constants