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")
}
}