1、关于scss中变量的使用

@import ”@/common/css/main.scss“ div{ width: $headerHeader; //直接使用 height: calc(100% - #{$headerHeight}); //在calc中使用变量，变量需要用 #{ }括起来，才能编译成变量，否则会编译成字符串 }

2、使用js动态修改scss中的变量 在main.scss中：

//--navWidth为变量,必须以--开头，否则其它页面使用这个变量不会生效 $navWidth:var(--navWidth,63px);// 侧边导航宽度

在页面中使用js动态修改： 此时涉及到这个变量的元素都需要设置一下

const isCollapseChange = () => { data.isCollapse = !data.isCollapse if(data.isCollapse){ document.getElementById("nav-wrap").style.setProperty("--navWidth","63px") document.getElementById("main-wrap").style.setProperty("--navWidth","63px") }else{ document.getElementById("nav-wrap").style.setProperty("--navWidth","200px") document.getElementById("main-wrap").style.setProperty("--navWidth","200px") } }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。