如何使用 javascript 控制 Sass 变量

Posted 2023-03-07

【中文标题】如何使用 javascript 控制 Sass 变量

【英文标题】：How to control Sass Variable with javascript

【发布时间】：2013-07-21 04:53:37

【问题描述】：

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

例如，在 style.sass 中我们有

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

如何通过 JavaScript 更改这些值？

【参考方案1】：

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

【讨论】：

感谢 GJK。但我想在生成 css 之前更改我的变量。就像有些人在 bootstrap themeroller 中所做的那样，就像我想为我的网页设置主题一样。

好吧，我可以告诉你，当然没有预先制作的 Javascript 库来操作 SASS 文件。您将不得不使用普通的旧文件 IO 在服务器端（如果您想使用 Javascript，则通过 Node.js）进行。

【参考方案2】：

CSS

:root 
  subTitleLeftMargin: 1.5vw;


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

JS 或 TS

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

【讨论】：

document.documentElement.style 不能在服务器端工作，对吧？

我不这么认为。

这改变了一个变量值，但在任何地方都没有影响@Krull

【参考方案3】：

我也需要这个功能，这对我有用：

使用 JS，您可以将类设置为 body，例如。 .blue 或 .default 现在创建一组规则来扩展，你想设置：

.default .themeColor 
  color: 'red';

.blue .themeColor 
  color: 'blue';

现在不要在 scss 文件中使用 color: $someColor，而是像这样使用它：

.someClass 
   @extend .themeColor;
 

现在，如果你的 body 有 default 类，someClass 内部的颜色将为红色，如果 body 有 blue 类，颜色将为蓝色。

【讨论】：

不适用于 shadow dom 或 shadow dom 仿真（如 Angular 中的组件样式封装）

【参考方案4】：

我发现 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';

【参考方案5】：

如果您想做引导程序所做的事情（即编辑字段以下载主题）。

你必须：

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

我会亲自用 php 来做这件事。

【参考方案6】：

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

查看相关问题https://***.com/a/26507880/4127132

【参考方案7】：

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

【讨论】：

谢谢凯蒂克。但我听说在 ok node.js 的帮助下，我们可以做到这一点。 [链接]npmjs.org/package/node-sass

嗨@Ankit先生，这个工具真的可以吗，请告诉我们怎么做？，现在反应官方网站推荐这个。

【参考方案8】：

风格多变

:root 

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

通过 javascript 更改变量值

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

【讨论】：

这将改变 css 变量而不是 scss 变量

【参考方案9】：

使用 Sass 或任何其他变量来设置初始值

JavaScript 将同名的 CSS 自定义属性设置为 根据需要更新这些值（同名只是一种偏好）。

您不需要定义 CSS 根属性，因为 Sass 变量是备用变量，最初会被使用。这允许您使用 Sass 或任何其他样式处理器在服务器端做任何您想做的事情，并在客户端更新值。

这是一个控制背景颜色的颜色选择器示例。

see Codepen demo here.

scss

$selectedColor: #000;

body 
  background: var(--selectedColor, $selectedColor);

html

<input type="color">

js

const colorInput = document.querySelector('[type=color]')

// Set the CSS custom property --selectedColor on the root element
// Now JavaScript controls this variable and everywhere you used Sass variables if you follow this pattern
const handleColorInput = e => document.documentElement.style.setProperty("--selectedColor", e.target.value)
    
colorInput.addEventListener('input', handleColorInput)