前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

vue :style 使用calc()

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中传值动态计算去实现

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言