How to control Sass Variable with javascript

在JavaScript中直接控制Sass变量并不直接可能，因为Sass（一种CSS预处理器）在服务器端或构建时就已经被编译成CSS了。这意味着所有的变量和逻辑都已经转换成静态的CSS代码，发送到浏览器之前。但是，我们可以通过几种方法间接实现动态控制Sass变量的效果：

方法一：CSS变量结合Sass使用

最常见且推荐的方法是使用CSS自定义属性（也称为CSS变量），这些变量可以在运行时由JavaScript控制，并且可以在Sass中使用。

1. 定义CSS变量：在CSS（或Sass）中定义一些基础变量。

   scss
   :root {
       --primary-color: #ff6347; // 默认颜色
   }
   
   body {
       background-color: var(--primary-color);
   }

2. 通过JavaScript修改变量：你可以在JavaScript中动态改变这些变量的值。

   javascript
   document.documentElement.style.setProperty('--primary-color', '#4CAF50');

这种方法的优点是简单且符合现代web开发的标准，也支持在浏览器端动态更改样式。

方法二：通过JavaScript动态添加样式

如果你需要从JavaScript中动态生成一些样式规则，可以通过JavaScript直接向页面添加<style>标签或者修改现有的CSS样式表。

1. 动态创建样式：

   javascript
   const style = document.createElement('style');
   document.head.appendChild(style);
   style.innerHTML = `body { background-color: ${yourDynamicColor}; }`;

方法三：使用预处理器和构建工具

如果项目使用构建工具（如Webpack），可以在构建过程中通过环境变量或配置文件来修改Sass变量。

1. 在Sass中使用环境变量：

   scss
   // 在Sass文件中
   $primary-color: #{env('PRIMARY_COLOR', '#ff6347')};
   
   body {
       background-color: $primary-color;
   }

2. 在构建配置中设置环境变量（以Webpack为例）：

   javascript
   new webpack.DefinePlugin({
       'process.env.PRIMARY_COLOR': JSON.stringify('#4CAF50')
   });

这种方法更适用于在构建时就已经确定了风格或者主题的场景。

综上所述：

虽然不能直接在JavaScript中修改Sass变量，但可以通过CSS变量、动态创建样式或者构建时配置的方式实现类似的效果。这些方法各有适用场景，可以根据项目需求和环境选择最合适的一种。