31

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

例如，在 style.sass 我们有

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

如何从 JavaScript 更改这些值？

4

9 回答 9

23

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

于 2013-07-22T12:46:19.203 回答
17

CSS

:root {
  subTitleLeftMargin: 1.5vw;
}

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

JS或TS

document.documentElement.style.setProperty("--subTitleLeftMargin", "6vw");
于 2018-10-30T11:29:59.177 回答
9

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

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

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

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

.someClass {
   @extend .themeColor;
 }

现在，如果你的 body 有default类，里面的颜色someClass是红色，如果 body 有blue类，颜色是蓝色。

于 2017-10-25T14:08:37.940 回答
3

我发现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';
于 2019-05-28T13:46:19.167 回答
1

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

于 2013-07-22T18:44:45.200 回答
1

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

你必须：

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

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

于 2013-07-29T02:31:22.407 回答
1

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

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

于 2016-08-20T19:37:12.363 回答
1

风格多变

:root {

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

}

通过javascript更改变量值

root.style.setProperty('--bg', '#fff');
root.style.setProperty('--font-size', '14px');
于 2020-10-14T14:37:18.353 回答
0

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

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

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

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

在此处查看 Codepen 演示。

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)
于 2021-09-28T13:25:25.840 回答