如何使用JavaScript控制Sass变量

Jim · 03月23日

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

例如,在style.sass中,

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

如何从JavaScript更改这些值?

回答(5)
时间
G
Gil小哥番长
5 · 2020-03-23 21:50:38

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

G
GreenTom西里
4 · 2020-03-23 21:50:38

如果您要执行引导程序(例如,编辑字段以下载主题)。

您必须:

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

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

G
Gil西门
3 · 2020-03-23 21:50:38

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

2 · 2020-03-23 21:50:38

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

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

神无
1 · 2020-03-23 21:50:38

的CSS

:root {
  subTitleLeftMargin: 1.5vw;
}

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

JS或TS

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

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序