访问 SASS 个模块中的自定义属性

Question

所以，假设我有一个 SASS 模块 _module.scss，它声明了一些 css 变量，也就是自定义属性。当我现在将此模块加载到另一个 SASS 样式表中时，我们称它为 main.scss，我可以访问所有 SASS 变量、混合和规则，但不能访问其中的自定义属性？我错过了什么吗？

示例文件：

//_module.scss
:root {
   --some-variable: red;
}

// main.scss
@use 'module';

div {
   background-color: var(module.--some-variable); // won't work, private property because of leading '-'
   background-color: module.var(--some-variable); // won't work, would have been horrible syntax as well
}

我可以使用 @import 但不鼓励和弃用（参见 SASS Documentation）。我尝试将变量包含在纯 css 文件 module.css 中，该文件已编译但未在运行时声明任何自定义属性，因为它直接从我的 [=39= 翻译 @use 'module' ] 文件在 CSS 中完全相同 - 浏览器显然不理解。它应该或多或少地复制一个纯 css 文件的内容，但它没有。当然，我可以尝试在我的模块中编写 mixins 来设置变量，但这只是一种解决方法。

我错过了什么吗？我真的需要编写一个 mixin 来设置变量并需要加载吗？这使得在模块中使用自定义属性非常麻烦。

编辑

忘记提及，background-color: var(--some-variable) 也不起作用，即使它应该根据 documentation，因为规则应该直接应用而无需范围界定。

Answer 1

呃。问题绝对是我的 VS Code 扩展使用 LibSass 而不是 Dart Sass。因此 @use 在大多数环境中尚不支持。文档绝对应该更明确地说明这一点，尤其是在警告使用 @import 时。

因为我知道它可以与 @import 一起使用，所以问题已解决，但我希望看到模块系统也包含在 LibSass 中。

tl;dr

如果您不确定是否使用 Dart，请不要使用 @use Sass！

访问 SASS 个模块中的自定义属性

Accessing custom properties in SASS modules

css

sass

css-variables