Réglage de l'opacité/alpha sur rgba dans la variable css

Question

J'essaie des variables CSS et je voudrais utiliser des couleurs RVB.

Voici mon variable actuel CSS:

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

donc cela fonctionne tout à fait bien en utilisant le code suivant:

color: var(--primary) 

Mais certains paragraphes utilisent également cette couleur primaire et je voudrais leur donner une légère transparence. Maintenant, je pourrais le remplacer et créer une autre variable CSS comme ceci:

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

Mais que tout se sent désordre et confusion avec deux couleurs primaires et si j'utilise quelques transparents différents. Je pourrais aussi utiliser la variable CSS suivant:

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

et la sortie en utilisant le code suivant:

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

Cela fonctionne comme je veux et je pense personnellement est une plus belle façon de le faire, mais mes couleurs ne prévisualisez pas dans mon éditeur de code voir l'image.

Regardez la variable --dark, il ne montrera pas la couleur en utilisant ce code.

Idéalement, je voudrais utiliser:

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

et de sortie comme ceci:

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

Mais ça ne marchera pas?

Answer 1

En supposant que vous utilisez atom-pigment. La détection des couleurs fonctionne également dans les commentaires. Donc, vous pourriez peut-être ajouter la valeur rgb réelle dans les commentaires uniquement pour la référence & utiliser la variable comme d'habitude. Comme si:

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