如何使用 javascript 控制 Sass 变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17787845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to control Sass Variable with javascript
提问by JA9
I have a Sass file which is generating a CSS file. I have used many variables in my sass file for background color, font-size, now I want to control my all variables through JavaScript.
我有一个生成 CSS 文件的 Sass 文件。我在我的 sass 文件中使用了许多变量作为背景颜色、字体大小，现在我想通过 JavaScript 控制我的所有变量。
For example, in style.sass we have
例如，在 style.sass 中我们有
$bg : #000;
$font-size: 12px;
How can I change these values from JavaScript?
如何从 JavaScript 更改这些值？
回答by GJK
You can't. SASS is a CSS preprocessor, which means that allSASS specific information disapears when you compile it to CSS.
你不能。SASS 是一个 CSS 预处理器，这意味着当您将其编译为 CSS 时，所有SASS 特定信息都会消失。
回答by Ziarno
I also needed this functionality, here's what worked for me:
我也需要这个功能，这对我有用：
With JS you can set a class to body, ex. .blueor .defaultNow create a set of rules to extend from, which you'd like to set:
使用 JS，您可以将类设置为 body，例如。.blue或者.default现在创建一组规则来扩展，你想设置：
.default .themeColor {
color: 'red';
}
.blue .themeColor {
color: 'blue';
}
Now instead of having color: $someColorin your scss file, use it like this:
现在，不要color: $someColor在您的 scss 文件中使用它，而是像这样使用它：
.someClass {
@extend .themeColor;
}
Now, if your body will have the defaultclass, the color inside someClasswill be red, and if body will have the blueclass the color will be blue.
现在，如果你的 body 有defaultclass，里面的颜色someClass会是红色，如果 body 有blueclass，颜色会是蓝色。
回答by Krull
CSS
CSS
:root {
subTitleLeftMargin: 1.5vw;
}
.element {
margin-left: var(--subTitleLeftMargin);
}
JS or TS
JS 或 TS
document.documentElement.style.setProperty("--subTitleLeftMargin", "6vw");
回答by Tudor Morar
I find sass-extract-loaderespecially helpful for using with Create-React-App.
我发现sass-extract-loader对于与 Create-React-App 一起使用特别有用。
You can use it like:
你可以像这样使用它：
_variables.scss
_variables.scss
$theme-colors: (
"primary": #00695F,
"info": #00A59B
);
component.tsx
组件.tsx
const style = require('sass-extract-loader!./_variables.scss');
const brandInfo = style.global['$theme-colors'].value.primary.value.hex; // '#00695F';
回答by Shannon Hochkins
If you're looking to do what bootstrap do (ie editing fields to download a theme).
如果您想做引导程序所做的事情（即编辑字段以下载主题）。
You'd have to:
你必须：
- Have the files on hand that you want to edit
- Store these variables as a string, and use
.replace()to search and replace variables - Output this string and compile it to a file and or zip it up for download.
- 手头有要编辑的文件
- 将这些变量存储为字符串，并用于
.replace()搜索和替换变量 - 输出此字符串并将其编译为文件或将其压缩以供下载。
I'd personally do this with php.
我个人会用 php 来做这件事。
回答by Chase Oliphant
Share data between Sass and JavaScript using JSON.
使用 JSON 在 Sass 和 JavaScript 之间共享数据。
See related question https://stackoverflow.com/a/26507880/4127132
回答by KatieK
JavaScript runs client-side (in the web browser), while Sass is generated server-side, so you have to find some way to bridge that gap. One way to do this would be to set up some AJAX-style listening to send JavaScript events over to your server, and then have the server edit and re-compile your style.sass file.
JavaScript 在客户端（在 Web 浏览器中）运行，而 Sass 在服务器端生成，因此您必须找到某种方法来弥合这一差距。一种方法是设置一些 AJAX 风格的监听来将 JavaScript 事件发送到您的服务器，然后让服务器编辑并重新编译您的 style.sass 文件。
