如何使用 PostCSS 将 class 属性 保存在变量中?
How can I save a class property in a variable with PostCSS?
我想在变量中保存动态 属性,然后我想将该变量与 calc()
一起使用
我有一个 class 具有动态高度
.cuerpo-detalle {
height: x;
}
我想用 class .cuerpodetalle
的高度 属性 分配一个变量
:root{
cuerpoDetalle: .cuerpo-detalle.height;
}
然后我想将该变量用作动态度量并将其乘以 2 得到 footerxpand
.footerxpand{
height: calc(var(--cuerpoDetalle)*2);
}
你可以用 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>
我想在变量中保存动态 属性,然后我想将该变量与 calc()
我有一个 class 具有动态高度
.cuerpo-detalle {
height: x;
}
我想用 class .cuerpodetalle
:root{
cuerpoDetalle: .cuerpo-detalle.height;
}
然后我想将该变量用作动态度量并将其乘以 2 得到 footerxpand
.footerxpand{
height: calc(var(--cuerpoDetalle)*2);
}
你可以用 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>