Einstellung der Opazität/Alpha auf rgba in CSS Variable

Question

Ich probiere CSS Variablen aus und möchte RGB Farben verwenden.

Hier ist meine aktuelle CSS Variable:

--primary: rgb(112, 199, 255); 

So funktioniert das absolut in Ordnung, wenn Sie den folgenden Code:

color: var(--primary) 

Aber einige Absätze auch diese Grundfarbe verwenden, und ich möchte ihnen geben, eine leichte Transparenz. Jetzt konnte ich das ersetzen und eine andere CSS-Variable erstellen wie folgt:

--primary: rgb(112, 199, 255);  
--primary-alpha: rgba(112, 199, 255, 0.7); 

Aber das fühlt sich einfach chaotisch und verwirrend, die zwei Primärfarben und was ist, wenn ich ein paar verschiedene Folien verwenden. Ich konnte auch die folgende CSS Variable verwenden:

--primary: 112, 199, 255; 
--alpha: 0.7; 

und Ausgabe, die es mit dem folgenden Code:

color: rgba(var(--white), var(--alpha)); 

Dies funktioniert, wie ich will, und ich persönlich denke, ist ein schöner Weg, es zu tun, aber meine Farben Vorschau nicht in meinem Code-Editor siehe Bild.

Blick auf die --dark Variable, wird es nicht die Farbe zeigen, diesen Code verwenden.

Idealerweise würde ich gerne verwenden:

--primary: rgb(112, 199, 255); 

und gibt es etwa so:

color: var(--white), var(--alpha); 

Aber es wird nicht funktionieren?

Answer 1

Angenommen, Sie verwenden atom-pigment. Die Farberkennung funktioniert auch innerhalb von Kommentaren. So könnten Sie vielleicht den tatsächlichen rgb-Wert in den Kommentaren nur als Referenz hinzufügen & Verwenden Sie die Variable wie gewohnt. Wie so:

--dark: 18, 38, 51 /* this color is - rgb(18, 38, 51) */