javascript - 将 SASS 变量转换为 CSS 根变量

Question

我想做以下事情：我的网站上有一个颜色切换器，当用户点击一种颜色时，我想用 Javascript 将我网站上的文本颜色更改为点击的颜色。在我的 JS 代码中，我想通过将 CSS 根变量修改为单击颜色的十六进制数据集来实现这一点。

**我想强调我将 grunt 与 grunt-contrib-sass 插件一起使用。

这就是我的颜色变量在 _variables.scss 文件中的样子

// Main colors
$color-primary: #202326;
$color-primary-light: #1a1c1f;
$color-secondary: #26c3f6;
$color-secondary-light: #25c2f5;
$text-color-main: #999;
$light-gray: rgb(33, 37, 40);
$dark-gradient: linear-gradient(to top, #1a1b1f, #212528);
$link-color-background: #262626;
$link-color-hover: #1a1c1f;

我希望这些变量在我的 main.css 文件中显示为根变量。此时它们被转换为变量的颜色。

下面是一个例子：

.nav .sub-menu__link .sub-menu__anchor:hover {
          color: #26c3f6;
}

我希望我的 main.css 文件看起来像这样：

:root{ 
  --color-primary: #202326; 
}

.nav .sub-menu__link .sub-menu__anchor:hover {
          color: var(--color-primary);
}

非常感谢！