如何使用js来修改sass和less变量

403 阅读1分钟

这里使用sass举例,less同理可以使用

首先你需要知道css变量的概念,如果不知道请自行搜索查看

首先我们定义css变量

:root{
    --color:red;
}

然后定义sass变量

:root{
  $color:var(--color:red);
}

最后使用我们使用js修改css变量值来修改sass的变量值

document.getElementsByClassName('body')[0].style.setProperty('--test', 'blue');

这个方法也可以绕过浏览器兼容问题让ie也可以使用css变量,但是需要让服务器监听sass文件进行时实监听编译
如果使用less就可以使用less.js进行编译