variables css - déclarer une variable si elle n'est pas déjà définie

Question

J'ai un projet qui est divisé en l'application parente, et plusieurs composants enfants réutilisables dans des dépôts séparés. Je voudrais définir les variables CSS par défaut dans ces composants enfants, qui peuvent être remplacées par l'application parente, mais je ne trouve pas la bonne syntaxe pour cela. Voici ce que j'ai essayé:

/* 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

La couleur doit être bleu, mais quand l'enfant :root est définie, la couleur est en fait rouge, au moins dans Chrome.

Y a-t-il une approche correcte pour cela? Dans SASS, vous pouvez ajouter un drapeau !default à vos variables enfants, ce qui signifie en gros «déclarer si ce n'est pas déjà déclaré».

Answer 1

CSS signifie cascading style sheets, de sorte que vous ne pouvez pas remplacer quoi que ce soit par un parent ...

La seule façon est de créer une règle plus forte .

regard sur .c1 et .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

Merci à @Hitmands soupçon J'ai une solution propre:

/* 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); 
}