vue :style 使用calc()
本来想在scss中去动态实现样式的改变
但是不能直接进行动态计算,因为 SCSS 是一种预处理器,它在编译成 CSS 之前静态地处理样式代码。SCSS 本身不支持运行时计算或根据浏览器中的实际条件改变样式。
尝试了好几种方法
第一种:
`:root {
--dynamic-height: 100px;
}
.myElement {
height: var(--dynamic-height);
}`
// 使用JavaScript更改CSS Variable的值
document.documentElement.style.setProperty('--dynamic-height', '200px');
第二种:
$base-height: 100px;
$multiplier: 1.5;
.my-element {
height: $base-height * $multiplier; // 结果会在编译时计算并硬编码到 CSS 中
}
还是不行,最后没有办法,只能通过动态style去实现了,有没有什么好的方法可以运用calc中传值动态计算去实现