Generieren Sie Standardwerte und CSS-Variablen mit SCSS

Question

Ich setze Website-Styling um.

Aus Gründen der Legacy-Unterstützung muss ich IE11 zumindest für eine Weile unterstützen. Aus Gründen des Arbeitsablaufs und meiner Vernunft möchte ich wann immer möglich CSS-Variablen verwenden.

Ich habe mir diese Lösung angesehen und sie generiert etwas, das funktioniert, aber ziemlich ausführlich zu verwenden ist.

Mein Ziel ist es, einen fest codierten Wert zu erhalten, der sofort von einer CSS-Variablen überschrieben wird. Auf diese Weise kann ich für alle ein Standardthema hinzufügen und für die Browser, die CSS-Variablen unterstützen, ein anderes Thema (z. B. den Dunkelmodus) hinzufügen. Ich muss das natürlich nicht alles selbst schreiben.

Meine Idee ist also, dass ich so etwas schreiben könnte:

$foo {...?}

:root {
  --foo: red;
}

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

p {
  color: $foo;
}

Es wird als

übersetzt

:root {
  --foo: red;
}

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

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

Kann dies mit scss erreicht werden? Ich möchte dieses Projekt nicht durch das Hinzufügen einiger zufälliger NPM-Module oder anderer Compiler und Transpiler von Drittanbietern aufblähen. Ich weiß, dass es möglich ist, eine Polyfüllung für IE11 hinzuzufügen, um Unterstützung für CSS-Variablen hinzuzufügen, aber die meisten davon, die ich bisher gefunden habe, weisen eine unglückliche Einschränkung auf (außerdem handelt es sich um Code von Drittanbietern, den ich bevorzuge). Vermeiden Sie, wenn möglich). Dies ist die Lösung, die ich wählen könnte, wenn es keine gute Lösung mit SCSS gibt.

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")
}