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

【问题标题】：Accessing custom properties in SASS modules访问 SASS 模块中的自定义属性
【发布时间】：2026-01-02 05:40:01
【问题描述】：

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

示例文件：

//_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 中，该文件已编译但未在运行时声明任何自定义属性，因为它直接将我的 SASS 文件中的 @use 'module' 转换为 CSS 中的完全相同 - 浏览器不这样做'显然不明白。它应该或多或少地复制纯 css 文件的内容，但事实并非如此。当然，我可以尝试在我的模块中编写 mixin 来设置变量，但这只是一种解决方法。

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

编辑

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

【问题讨论】：

不能用SASS变量代替CSS变量吗？
我当然可以，但这会使它们变成静态的。可以在运行时使用 JS 代码更改自定义属性，如果需要，可以随时更改网格、颜色、字体大小等。

标签： css sass css-variables

【解决方案1】：

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

由于我知道它可以与 @import 一起使用，因此问题已得到解决，尽管我希望看到模块系统也包含在 LibSass 中。

tl;dr

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

【讨论】：