关于scss和js的参数传导

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

1.提出问题

当我们在scss中使用$语法定义公共参数的时候，有时候需要通过js进行异步的网络请求，来动态改变公共参数的值。同样，在某些场景下，比如canvas或者echars中，可能也需要通过js来获取到公共参数。

因此需要考虑scss和js的参数传导问题。

//scss文件
$mainColor:red // 定义一个变量$mainColor

// html文件。引用此变量。
<style> 
 .className{
        color:$mainColor
    }
</style>

2. js动态修改公共参数的值

分析：要想通过js代码动态修改scss文件中的值，那么第一步，就要用css3的语法var()设置一个具有作用域的属性名，然后通过js来改变这个属性的值

//scss文件
$mainColor:var(--mainColor,red); // （修改）设置一个具有作用域的属性名--mainColor

//  js文件

// 接下来全局修改--mainColor的值
 document.getElementsByTagName("body")[0].setAttribute("style","--mainColor:green")
 // 或者
 document.getElementsByTagName("body")[0].style.setProperty("--mainColor",'green')

那么此时className里的color属性，就是var(--mainColor,green)了，在浏览器上className的color属性用的是green。

3.通过js来获取公共参数

分析：要想获取scss文件里的参数，首先需要将参数从scss文件里导出。

//scss文件
$mainColor:var(--mainColor,red); // （修改）设置一个具有作用域的属性名--mainColor

// （新增）
:export{
    export-mainColor：$mainColor
}

这样就将全局中的$mainColor参数导出来了。接下来在js文件中导入scss文件

//  js文件

// 接下来全局修改--mainColor的值
 document.getElementsByTagName("body")[0].setAttribute("style","--mainColor:green")
 // 或者
 document.getElementsByTagName("body")[0].style.setProperty("--mainColor",'green')
 // （新增）
import {export-mainColor} from scssPath //scssPath指的是scss文件路径 
console.log(export-mainColor); // 打印1

思考，打印1是var(--mainColor, red)还是var(--mainColor, green)呢？

经试验，打印出的是var(--mainColor, red)，说明用js获取的$mainColor，只会是初始化的值。这是因为对--mainColor的改变只是浏览器dom层面的，而并没有改变$mainColor的值。当然，这也已经达到了我们获取$mainColor值的目的。

4.总结

当需要用js动态改变公共参数的值，可以使用css3的var语法定义带有作用域的值，再动态改变这个值。

当需要获取scss公共参数的时候，就用scss的:export语法将属性导出，再用js的import语法导入。同时需要注意，此时导出的值，如果为var语法定义，那么只能导出scss文件中初始化定义的值。后期对于var语法值更新，与js中导出的值无关。