如何有效利用 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 建立主題的好範例。