CSS-Variablen - Variable deklarieren, wenn nicht bereits definiert

Question

Ich habe ein Projekt, das in die Eltern-App aufgeteilt ist, und mehrere wiederverwendbare Kind-Komponenten in separaten Repositories. Ich möchte CSS-Standardvariablen in diesen untergeordneten Komponenten definieren, die von der übergeordneten App überschrieben werden können, jedoch kann ich dafür nicht die richtige Syntax finden. Hier ist, was ich versucht habe:

/* parent */ 
:root { 
    --color: blue; 
} 

/* child */ 
:root { 
    --color: var(--color, green); 
} 

.test { 
    width: 200px; 
    height: 200px; 
    background: var(--color, red); 
} 

https://codepen.io/daviestar/pen/brModx

Die Farbe Blau sein sollte, aber wenn das Kind :root definiert ist, die Farbe ist eigentlich rot, zumindest in Chrome.

Gibt es einen richtigen Ansatz dafür? In SASS können Sie Ihren Kindvariablen ein !default Flag hinzufügen, was im Grunde bedeutet "deklarieren, wenn es nicht bereits deklariert ist".

Answer 1

CSS steht für cascading style sheets, so dass Sie nichts von einem Elternteil außer Kraft setzen können ...

Der einzige Weg ist eine stärkere Regel zu erstellen.

Blick auf .c1 und .p1

.parent { 
 
    --background: red; 
 
} 
 

 
.child { 
 
    --size: 30px; 
 
    --background: green; /* this wins */ 
 

 
    background-color: var(--background); 
 
    width: var(--size); 
 
    height: var(--size); 
 
} 
 

 
.p1 .c1 { 
 
    --background: red; /* this wins */ 
 
} 
 

 
.c1 { 
 
    --size: 30px; 
 
    --background: green; 
 

 
    background-color: var(--background); 
 
    width: var(--size); 
 
    height: var(--size); 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div> 
 

 
<hr /> 
 

 
<div class="p1"> 
 
    <div class="c1"></div> 
 
</div>

Answer 2

Dank @Hitmands Hinweis, den ich eine saubere Lösung haben:

/* parent */ 
html:root { /* <--- be more specific than :root in your parent app */ 
    --color: blue; 
} 

/* child */ 
:root { 
    --color: green; 
} 

.test { 
    width: 200px; 
    height: 200px; 
    background: var(--color); 
}