0

I have found many answers from several years ago (like this) that say "no". However, have things changed? For example, is something like this now possible:

#property1 {
    height: 100px
}

#property2 {
    height: calc(#property1.height + 50px)
}

I know that I can do this with jquery, but is it possible to do in css only?

Community
  • 1
  • 1
Roman
  • 8,826
  • 10
  • 63
  • 103

4 Answers4

2

No, that is not possible in simple css, but you can do something like this in LESS:

@size: 100px;
#property1 {
  height: @size;
}
#property2 {
  height: @size + 50px;
}

More to find out here.

Florin Pop
  • 5,105
  • 3
  • 25
  • 58
1

No with pure css, but you can do that with a preproccessor like sass or less.

Here an example written on sass:

$height: 100px;
#property1 {
    height: $height;
}

#property2 {
    height: $height + 50px;
}

PS: dont listen to "less" people, they are just wrong :D

SASS

avcajaraville
  • 9,041
  • 2
  • 28
  • 37
1

The future is ... almost here.

As others have suggested, a preprocessor can be used to accomplish this. If, however, you're the type who lives on the bleeding edge while staying up all night reading draft specs, then you'll be excited about drumroll CSS variables!

Go, check it out here:

http://dev.w3.org/csswg/css-variables/

(MDN if draft specs don't get your juices flowing)

Awesomely enough, there's an example that is similar to your question!

one   { --foo: 10px; }
two   { --bar: calc(var(--foo) + 10px); }
three { --foo: calc(var(--bar) + 10px); }

Great, right?!

Well, the bad news...unfortunately, support is, well, terrible.

http://caniuse.com/#feat=css-variables

But, in the future (and fingers crossed), we'll have native CSS variables!

Jack
  • 9,151
  • 2
  • 32
  • 44
0

Yes! but o nly if the secound div is a child 

#property1 {
    height: 100px;
    width:320px;
    background:red
}

#property2 {
    height: calc(100% + 50px);
    width:100%;
    background:green
}
<div id=property1>
    <div id=property2></div>
</div>

if you don't want to use it as a child then it is time for you to learn a CSS pre-processor such as Less or Sass

Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
  • Technically, I think this is not correct. You are using the calc function, which perform a math operation over values, but not over reference. You are doing just a math operation, but there is no variable there. Its a clever trick anyway (because its use the width of the parent). Will only work with this particular property (other regarding to sizing too). – avcajaraville Sep 25 '14 at 08:31
  • Clever, but unfortunately only works for a very limited case. – Roman Sep 25 '14 at 08:46