Wir machen ein Angular2 Anwendung und wir möchten in der Lage sein, eine globale CSS-Variable zu erstellen (und die Werte der Eigenschaften zu aktualisieren, wenn sie bei der Zuweisung der Variablen geändert werden).

Wir haben Polymer für eine Weile verwendet (jetzt wechseln wir zu Angular2-Komponenten) und wir haben CSS-Eigenschaften verwendet (Polymer hat eine Polyfüllung) und wir haben Stile nur mit @ aktualisierPolymer.updateStyles().

ibt es eine Möglichkeit, wie wir eine ähnliche Funktion erreichen könne

BEARBEITEN

Wir wollen etwas Ähnliches wie Sasscolor: $g-main-color oder zu benutzerdefinierten CSS-Eigenschaftencolor: var(--g-main-color) und wann immer wir beschließen, den Wert der Eigenschaft zu ändern, z. etwas wieupdateVariable('g-main-color', '#112a4f') es aktualisiert dynamisch den Wert überall. Das alles, während eine App läuft.

EDIT 2:

Ich möchte einige globale CSS-Variablen in verschiedenen Teilen (Host, untergeordnetes Element ...) meines CSS verwenden und den Wert sofort ändern können. Wenn ich also meine Farbvariable ändere, ändert sich dies überall in der App.

Ich verwende die Sass-Syntax zum Beispiel:

:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }

Ist es möglich so etwas wie Winkelrohre zu verwenden? (Funktioniert aber angeblich nur in HTML)

:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }