如何用javascript控制Sass变量

我有一个Sass文件，它正在生成一个CSS文件。我在我的sass文件中使用了很多变量作为背景颜色、字体大小，现在我想通过JavaScript控制我的所有变量

例如，在style.sass中，我们有

$bg : #000;
$font-size: 12px;

---

如何从JavaScript更改这些值？

您不能。SASS是一个CSS预处理器，这意味着当您将其编译为CSS时，所有特定于SASS的信息都会消失。

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

如果您希望执行bootstrap所做的操作（即编辑字段以下载主题）

你必须：

手头有要编辑的文件

将这些变量存储为字符串，并使用

.replace（）

搜索和替换变量

输出此字符串并将其编译为文件，或者将其压缩以供下载

---

我个人会用php来做这件事

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

---

请参阅相关问题

我也需要此功能，以下是对我有效的方法：

使用JS，您可以将类设置为body，例如

.blue

或

.default

现在创建一组要从中扩展的规则，您要设置：

.default .themeColor {
  color: 'red';
}
.blue .themeColor {
  color: 'blue';
}

现在，不要在scss文件中使用

color:$someColor

，而是这样使用它：

.someClass {
   @extend .themeColor;
 }

现在，如果您的身体将有

默认的
类，那么
someClass
中的颜色将是红色，如果身体将有
蓝色的
类，那么颜色将是蓝色。
CSS

:root {
  subTitleLeftMargin: 1.5vw;
}

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

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

JS或TS

:root {
  subTitleLeftMargin: 1.5vw;
}

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

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

我发现使用CreateReact应用程序特别有用

您可以像这样使用它：

_变量.scss

$theme-colors: (
  "primary": #00695F,
  "info": #00A59B
);

component.tsx

 const style = require('sass-extract-loader!./_variables.scss');
 const brandInfo = style.global['$theme-colors'].value.primary.value.hex; // '#00695F';

风格多变

:root {

  --bg: #000;
  --font-size:12px;

}

通过javascript更改变量值

root.style.setProperty('--bg', '#fff');
root.style.setProperty('--font-size', '14px');

谢谢GJK。但是我想在css生成之前更改我的变量。就像一些人在bootstrap themeroller中所做的一样，我想以同样的方式为我的网页设置主题。好吧，我可以告诉你，肯定没有预先制作的Javascript库来操作SASS文件。您必须使用普通的旧文件IO在服务器端（如果您想使用Javascript，请通过Node.js）完成这项工作。谢谢katiek。但我听说有了帮助ok node.js，我们就可以做到这一点。[链接]你好@Ankit先生，这个工具真的有可能吗，请告诉我们怎么做？现在react官方网站推荐这个。不适用于shadow dom或shadow dom仿真（如angular中的组件样式封装）
document.documentElement.style
在服务器端无法正常工作？我不这么认为。这更改了一个变量值，但在@krull的任何地方都无效，这将更改
css
变量而不是
scss
变量