如何使用JavaScript控制Sass变量

JavaScript在客户端（在Web浏览器中）运行，而Sass在服务器端生成，因此您必须找到某种方法来弥合这种差距。一种方法是设置一些AJAX样式的侦听，以将JavaScript事件发送到您的服务器，然后让服务器编辑并重新编译style.sass文件。

如果您要执行引导程序（例如，编辑字段以下载主题）。

您必须：

1. 准备好要编辑的文件
2. 将这些变量存储为字符串，并用于.replace()搜索和替换变量
3. 输出此字符串并将其编译为文件，或将其压缩以进行下载。

我个人会用php做到这一点。

你不能 SASS是CSS预处理程序，这意味着当您将所有 SASS特定信息编译为CSS时，这些信息都会消失。

使用JSON在Sass和JavaScript之间共享数据。

参见相关问题https://stackoverflow.com/a/26507880/4127132

的CSS

:root {
  subTitleLeftMargin: 1.5vw;
}

.element {
  margin-left: var(--subTitleLeftMargin);
}

JS或TS

document.documentElement.style.setProperty("--subTitleLeftMargin", "6vw");