我有一个生成 CSS 文件的 Sass 文件。我在我的 sass 文件中使用了许多变量作为背景颜色、字体大小，现在我想通过 JavaScript 控制我的所有变量。
例如，在 style.sass 中我们有
$bg : #000;
$font-size: 12px;
如何从 JavaScript 更改这些值？
如何使用 javascript 控制 Sass 变量
IT技术
javascript
sass
2021-02-23 05:03:08
6个回答
你不能。SASS 是一个 CSS 预处理器，这意味着当您将其编译为 CSS 时，所有SASS 特定信息都会消失。
CSS
:root {
subTitleLeftMargin: 1.5vw;
}
.element {
margin-left: var(--subTitleLeftMargin);
}
JS 或 TS
document.documentElement.style.setProperty("--subTitleLeftMargin", "6vw");
我也需要这个功能，这对我有用：
使用 JS，您可以将一个类设置为 body，例如。.blue或者.default
现在创建一组规则来扩展，你想设置：
.default .themeColor {
color: 'red';
}
.blue .themeColor {
color: 'blue';
}
现在，不要color: $someColor在您的 scss 文件中使用它，而是像这样使用它：
.someClass {
@extend .themeColor;
}
现在，如果你的 body 有defaultclass，里面的颜色someClass会是红色，如果 body 有blueclass，颜色会是蓝色。
我发现sass-extract-loader对于与 Create-React-App 一起使用特别有用。
你可以像这样使用它：
_variables.scss
$theme-colors: (
"primary": #00695F,
"info": #00A59B
);
组件.tsx
const style = require('sass-extract-loader!./_variables.scss');
const brandInfo = style.global['$theme-colors'].value.primary.value.hex; // '#00695F';
如果您想做引导程序所做的事情（即编辑字段以下载主题）。
你必须：
- 手头有要编辑的文件
- 将这些变量存储为字符串，并用于
.replace()搜索和替换变量 - 输出此字符串并将其编译为文件或将其压缩以供下载。
我个人会用 php 来做这件事。