如何将 Sass 变量导出到 Javascript？

Question

我的应用程序中有一个 Sass 设置，它提供了一些 custom properties 以及 Sass $variables.

:root { --my-variable: #FFFFFF; }

$my-variable: var(--my-variable) !default;

而且我很乐意使用 :export 标签将这些变量导出到 Js，以便我可以在故事书中展示它们。

例如：

:export {
  myVar: var(--my-variable)
  ...
}

但我唯一能够实现的是，在 Js 中我得到的是字符串文字，而不是变量关联值，在这种情况下 #FFFFFF.

我是否需要在我的配置中执行任何特定操作才能实现此目的？

Answer 1

这是因为只有浏览器才能解释自定义属性。如果自定义属性声明如下：

:root { --body-backgroundColor: #fafafa; }

body { background-color: var(--body-backgroundColor); }

您可以通过 Js 操作 --body-backgroundColor:，但是 Sass 会将您的 $my-variable: var(--my-variable) !default; 解释为字符串，因为它无法将自定义属性与其值相关联.

此处的最佳做法是在自定义属性.

中传递变量

$myVar: #fff !default;

:root { --my-var: #{$myVar}; }

body { background-color: var(--my-var); }

:export {
  myVar: $myVar;
  ...
}

How do I export a Sass variable to Javascript?