如何有效利用 CSS 自定义属性？

Question

我正在开发一个具有自定义主题设置的应用程序，允许用户选择应用程序用来生成一组 10 个顺风风格颜色变量的原色。我使用 javascript 生成颜色并将它们注入到 dom 中，但在我的研究中，我发现不可能注入 scss 变量，因为 dom 只能访问编译后的 css。因此，我不得不使用 css 自定义属性而不是 scss 颜色。

我知道这是一个不寻常的用例，而不是 scss 与颜色一起使用的方式，但我希望能够找到解决问题的有效解决方案，而不是重写我的项目。

html {
    // Default Colors
    --color-primary-50: #F2F5FD;
    --color-primary-100: #E4EAFB;
    --color-primary-200: #C5D2F7;
    ...
}

const setPalette = function setPaletteCSS(palette) {
    Object.entries(palette).forEach((entry) => {
        const [step, color] = entry;
        document.documentElement.style.setProperty(
            `--color-primary-${step}`, 
            color
        );
    });
}

代码工作完美，但现在我的 main.scss 文件变得太大，我使用 7-1 架构模式将其拆分，该模式一直适用于 scss 文件的其他部分，直到我尝试移动这些颜色。具体来说，我将带有自定义颜色的html组件移至abstracts/_colors.scss：

.
└── scss/
    ├── abstracts/
    │   ├── _colors.scss
    │   └── _index.scss
    └── main.scss

我遇到的主要问题是我的组件像这样访问这些变量：

#site-header, #site-footer {
    color: var(--font-color);
    background-color: var(--color-primary-500);
}

我像其他组件一样使用 @use 将 abstracts/colors 添加到我的 main.scss 中，但我无法再访问这些颜色属性。

@use './abstracts' as a;

#site-header, #site-footer {
    color: a.var(--font-color);
    background-color: a.var(--color-primary-500);
}

这会导致 webpack 无法编译我的 scss 并显示以下错误：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
   ╷
49 │     color: a.var(--font-color);
   │            ^^^^^^^^^^^^^^^^^^^
   ╵

我理解该错误，但我不知道解决该错误的选项是什么。由于我一直坚持使用颜色的 css 自定义属性，有没有办法 @use 它们，或者我坚持将所有与颜色相关的 css 保留在同一个文件中？

Answer 1

我还没有找到将 SCSS 命名空间与 CSS 变量一起使用的方法。 如果您使用@use './abstracts' as *;，它将起作用。 本文提供了一个关于如何使用 scss 创建主题的好示例。