Derived CSS Values

Question

Is it possible to reference a value in one part of a stylesheet in another part? For example, say I want to set the CSS top value for a div with position:absolute to match the height of another element, is there a way to do that? Is it possible to say, in effect:

.div1 {
    height: 50px;
}

.div2 {
    position: absolute;
    top: <height value of div1>
}

If you have a fixed value on .div1, why not just add also that fixed value to .div2? — Vucko
– Vucko, Commented Dec 12, 2014 at 13:51
Do you mean adynamically sized element (flexible content etc) or do you mean to just not write the same number twice for the same height? — atmd
– atmd, Commented Dec 12, 2014 at 13:53
I had originally marked this as a duplicate of stackoverflow.com/questions/47487/…, but I guess this isn't really asking directly about variables within CSS files so I've reopened it. — James Donnelly
– James Donnelly, Commented Dec 12, 2014 at 13:54
Because the aim is that if I have an enormous stylesheet and I decide, in the future, to change the height of div1, everything else moves accordingly, rather than me having to change many values throughout the stylesheet. — Philip Stratford
– Philip Stratford, Commented Dec 12, 2014 at 13:55

RodrigoDela · Accepted Answer · 2014-12-12 14:14:22Z

3

You want to take a look at something like SASS or LESS.

You can use calculations with those (SASS example here):

$averageHeightDivs : 50;

and do things like

.div2 {
    height: 2*$averageHeightDivs;
}

But better you would use mixins:

@mixin divSize($factor, $width, $height) {
  height: $factor * $height;
  width: $factor * $width;
}

.div1 {
  @include divSize(1, 10, 20);
}

.div2 {
  @include divSize(2, 10, 20);
}

edited Dec 12, 2014 at 14:14

answered Dec 12, 2014 at 13:49

RodrigoDela

1,73613 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

atmd Over a year ago

Can you explain how exactily SASS or LESS can do this? I'm assuming you dont mean with a variable?

RodrigoDela Over a year ago

I would use variables. Is there a reason you cannot?

atmd Over a year ago

No thats perfectly fine, I assumed the OP meant the height of the second element wasnt known. maybe I miss read, I'd just assume that if the value WAS known, then why not use it.

atmd Over a year ago

Having seen the updated comments You have the best answer, I did get the wrong end of it and assume the OP meant css being aware of an element dimensions

RodrigoDela Over a year ago

I updated the answer a bit. Fixed some typos and added an example. What is the downvote for? Would really appreciate to know what it is about, we are all here to learn.

Liglo App · Accepted Answer · 2014-12-12 13:49:25Z

1

No, this is one of weak points of CSS. Luckily, there are some nice extension to CSS, which are easy to use and solve many common problems.

Have a look at these:

Less

SASS

answered Dec 12, 2014 at 13:49

Liglo App

3,8494 gold badges32 silver badges55 bronze badges

Comments

Kandice · Accepted Answer · 2014-12-12 13:53:25Z

1

You can do something like this using sass variables. Check out http://sass-lang.com/guide. Basically you set the values of each variable you want to reuse and then call it when needed.

answered Dec 12, 2014 at 13:53

Kandice

1062 bronze badges

Collectives™ on Stack Overflow

Derived CSS Values

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related