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.
以下是您可能想要改进的快速解决方案:
我决定创建一个需要 2 个参数的 mixin,即 css 属性和您想要的颜色。
完整代码: