Make CSS property dependent on another
I would like to make one of my CSS properties proportional to the other, but neither is the parent of the other. It will look like this:
elem-to-look {
/**
* This value could not be explicit,
* And I want it to working even with default values.
*/
width: 50px;
}
elem-derivative {
/* I'm looking for something like this */
left: [elem-to-look: width] + 25px;
}
Is it possible? If not, what solution would you recommend me?
+3
source to share
1 answer
Well, it's tricky, but under some conditions, you can do it.
If your body size is stable and you don't resize it in the parents of your elements, you can do the following:
body {
font-size: 20px;
}
elem-to-look {
width: 2.5em;
}
elem-derivative {
left: calc(2.5em + 25px);
}
If that suits you, it might work.
0
source to share