关于scss的变量使用，以及js如何动态修改scss中的变量

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

薛定谔的喵^O^

12506人浏览 · 2022-01-25 14:43:03

薛定谔的喵^O^ · 2022-01-25 14:43:03 发布

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