仅共享我的 sass/scss 变量的主题变量

Question

---

我需要为几个 web 组件共享一些 sass/scss 变量。为此，我们在 npm 包上创建了一个非常有用的“_variables.scss”。 问题是我们使用了两种颜色：

• 我称之为“真实颜色”：（$blue-unicorn, $pink-butterfly)
• 和主题颜色：($brand-color, $secondary-color)

并且我们只想共享主题颜色变量

主题颜色是这样制作的：$brand-color : $blue-unicorn;
如果 DA 突然决定使用 $grey-grave 和 $black-shadow 颜色，我们将只需要更新 npm 包，而不必更改各种 Web 组件上的所有其他代码的变量名。 如果你想了解更多关于这种用法的信息，你可以看看这篇关于调色板颜色和主题颜色的文章http://blog.magmalabs.io/2018/04/17/nice-way-handle-sass-color-variables.html。

我们的 variables.scss 的原始文件是这个：

@import 'variables/_colors';

$brand-color: $blue-unicorn;
$secondary-color: $pink-butterfly;

我们使用scss-bundle npm 包为我们包的客户获取该包

$blue-unicorn: #0081EB;
$pink-butterfly: #F62880;

$brand-color: $blue-unicorn;
$secondary-color: $pink-butterfly;

我们不希望用户访问真实的颜色

获得它的正确方法是什么？

$brand-color: #0081EB;
$secondary-color: #F62880;

Answer 1

如果您的用户应该使用 scss 文件，那么唯一的选择是新的模块系统，该系统目前仅受 Dart Sass 编译器支持。您需要将 @import 指令替换为 @use 并在所有私有变量前加上 -，因为这会使它们成为私有变量并且不会被共享。

同样，目前仅在 Dart Sass 中支持此功能。

欲了解更多信息，请参阅documentation。