如何使用JavaScript控制Sass变量

JavaScript CSS

蛋蛋猿

2020-03-23

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

例如，在style.sass中，

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

如何从JavaScript更改这些值？

第3099篇《如何使用JavaScript控制Sass变量》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
Gil小哥番长 2020.03.23

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

GreenTom西里 2020.03.23

如果您要执行引导程序（例如，编辑字段以下载主题）。

您必须：

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

我个人会用php做到这一点。

Gil西门 2020.03.23

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

乐 2020.03.23

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

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

神无 2020.03.23

的CSS

:root {
  subTitleLeftMargin: 1.5vw;
}

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

JS或TS

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android