如何使用 PostCSS 将类属性保存在变量中？

【问题标题】：How can I save a class property in a variable with PostCSS?如何使用 PostCSS 将类属性保存在变量中？
【发布时间】：2018-03-14 23:10:25
【问题描述】：

我想在一个变量中保存一个动态属性，然后我想将该变量与calc()一起使用

我有一个动态高度的类

.cuerpo-detalle {
  height: x;
}

我想用类.cuerpodetalle的高度属性分配一个变量

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

然后我想将该变量用作动态度量并将其乘以 2 以获得 footerxpand

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

【问题讨论】：

标签： javascript css postcss cssnext

【解决方案1】：

你可以用js做这样的事情......

This question about calculating height with javascript 也可能有用。

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>

【讨论】：