使用SCSS產生預設值和CSS變數

Question

我正在實現網站樣式。

出於遺留支援的原因，我需要支援 IE11，至少一段時間。出於工作流程和我的理智原因，我想盡可能使用 css 變數。

我已經研究過這個解決方案，它會產生一些有效的東西，但使用起來相當冗長。

我的目標是最終得到一個硬編碼值，該值會立即被 CSS 變數覆蓋。這樣我就可以為每個人添加預設主題，並為那些支援 css 變數的瀏覽器添加不同的主題（例如暗模式）。顯然不需要我自己寫所有這些。

所以我的想法是我可以寫這樣的東西：

$foo {...?}

:root {
  --foo: red;
}

:root.dark {
  --foo: black;
}

p {
  color: $foo;
}

它被轉譯為

:root {
  --foo: red;
}

:root.dark {
  --foo: black;
}

p {
  color: red;
  color: var(--foo);
}

這可以用 scss 實作嗎？我不想想向這個專案添加一些隨機的 npm 模組或其他第三方編譯器和轉譯器來使其變得臃腫。

我知道有可能為IE11 添加一個polyfill，以增加對CSS 變數的支持，但到目前為止我發現的大多數都有某種形式的不幸的限制（另外，它們是我更喜歡的第三方代碼）如果可以的話避免）。如果使用 SCSS 沒有好的解決方案，我可能會採用這種解決方案。

Answer 1

以下是您可能想要改進的快速解決方案：

1. 使用所有顏色定義地圖：

$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);

2. 循環地圖以建立 CSS 自訂屬性：

@each $color, $value in $colors {
    :root {
        --#{$color}: #{$value};
    }
}

3. 建立一個 mixin 以輸出後備和值。
   我決定建立一個需要 2 個參數的 mixin，即 css 屬性和您想要的顏色。

@mixin propertyPlusColorValue($property, $color) {
    #{$property}: map.get($colors, $color);
    #{$property}: var(--#{$color});
}

4. 然後你可以這樣使用它：

.foobar {
    @include propertyPlusColorValue(color, "blue");
    @include propertyPlusColorValue(background-color, "red")
}

---

完整程式碼：

@use "sass:map";

$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);

@each $color, $value in $colors {
    :root {
        --#{$color}: #{$value};
    }
}

@mixin propertyPlusColorValue($property, $color) {
    #{$property}: map.get($colors, $color);
    #{$property}: var(--#{$color});
}

.foobar {
    @include propertyPlusColorValue(color, "blue");
    @include propertyPlusColorValue(background-color, "red")
}