How can I save a class property in a variable with PostCSS?

Question

I want to save a dynamic property in a variable and then I want to use that variable with calc()

I have a class with a dynamic height

.cuerpo-detalle {
  height: x;
}

I want to assign a variable with the height property of the class .cuerpodetalle

:root{
  cuerpoDetalle: .cuerpo-detalle.height;
}

Then I want to use that variable as a dynamic measure and multiply that in 2 for a footerxpand

.footerxpand{
  height: calc(var(--cuerpoDetalle)*2);
}

score 0 · Accepted Answer · answered Mar 14 '18 at 23:24

You can do something like this with js...

This question about calculating height with javascript may also be helfpful.

var elem = document.getElementById('cuerpo-detalle'),
  height = elem.offsetHeight;
document.documentElement.style.setProperty('--cuerpoDetalle', height + 'px');

:root {
  --cuerpoDetalle: auto;
}

footer {
  height: calc(var(--cuerpoDetalle) * 2);
  background: black;
}

div {
  width: 66ch;
  margin: 0 auto;
}

<div id="cuerpo-detalle">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, facere officiis amet cumque voluptas repudiandae, iure accusamus consequatur dolor eligendi autem architecto ea libero eum perspiciatis voluptate molestias laboriosam. Ad.</p>
</div>

<footer></footer>

How can I save a class property in a variable with PostCSS?

1 Answers1