Les propriétés personnalisées de la portée CSS ne sont pas reconnues lorsqu'elles sont utilisées pour évaluer des variables dans la portée parent

Question

J'essaie d'augmenter la taille via var propriétés personnalisées afin que les classes puissent être composées sans couplage. L'effet recherché est que les 3 listes auront 3 échelles différentes, mais comme indiqué sur CodePen, les 3 listes auront la même échelle. Je recherche une explication des techniques de portée et de propriétés personnalisées CSS qui peuvent y parvenir avec du code composable et faiblement couplé.

:root {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }

.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }

html {
  font: 1em sans-serif;
  background: papayawhip;
}

ol {
  float: left;
  list-style: none;
  margin: 1rem;
}

<ol class="scale-1x">
  <li class="size-1">size 1</li>
  <li class="size-2">size 2</li>
  <li class="size-3">size 3</li>
</ol>
<ol class="scale-2x">
  <li class="size-1">size 1</li>
  <li class="size-2">size 2</li>
  <li class="size-3">size 3</li>
</ol>
<ol class="scale-3x">
  <li class="size-1">size 1</li>
  <li class="size-2">size 2</li>
  <li class="size-3">size 3</li>
</ol>

Answer 1

Dans votre cas, vous avez évalué --scale 自定义属性来定义 --size-* 属性，然后定义了 --scale au niveau racine à nouveau à l'intérieur d'un élément enfant. Cela ne déclenchera pas à nouveau l'évaluation car elle est déjà effectuée dans la couche supérieure.

Voici un exemple simple pour illustrer ce problème :

.box {
  --color: var(--c, blue);
}

span {
  color: var(--color);
}

<div>
  <div class="box"><!-- --c is evaluated at this level -->
    <span style="--c:red">I will not be red because the property is already evaluated and --color is set to blue using the default value</span>
  </div>
</div>

<div style="--c:red">
  <div class="box"><!-- --c is evaluated at this level -->
    <span>I will be red because at the time of the evaluation --c is red (inherited from the upper div)</span>
  </div>
</div>

Pour résoudre votre problème vous devez définir la déclaration de :root 移至与 --scale au même niveau :

.scale {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }

.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }


html {
  font: 1em sans-serif;
  background: papayawhip;
}

ol {
  float: left;
  list-style: none;
  margin: 1rem;
}

<ol class="scale-1x scale">
  <li class="size-1">size 1</li>
  <li class="size-2">size 2</li>
  <li class="size-3">size 3</li>
</ol>
<ol class="scale-2x scale">
  <li class="size-1">size 1</li>
  <li class="size-2">size 2</li>
  <li class="size-3">size 3</li>
</ol>
<ol class="scale-3x scale">
  <li class="size-1">size 1</li>
  <li class="size-2">size 2</li>
  <li class="size-3">size 3</li>
</ol>

Dans ce cas, --scale 的定义级别与其评估相同，因此将为每种情况正确定义 --size-*.

---

De Spécifications :

Dans le premier cas, vous êtes bloqué à 3 car aucune valeur n'est spécifiée pour --scale au niveau racine. Dans le dernier cas, on est bloqué à --scale指定值。在最后一种情况下，我们陷入了2，因为我们在同一级别定义了--scale2

car on a défini --scale au même niveau et on a sa valeur.

---

:rootDans tous les cas, nous devons éviter toute évaluation au niveau

car elle n'est tout simplement pas utile. Le niveau racine est le niveau supérieur du DOM, donc tous les éléments hériteront de la même valeur, il est impossible d'avoir des valeurs différentes dans le DOM à moins d'évaluer à nouveau la variable.

Votre code est équivalent à ce code :

---

:root {
  --size-1: calc(1 * 1 * 1rem);
  --size-2: calc(2 * 1 * 1rem);
  --size-3: calc(3 * 1 * 1rem);
}

Donnons un autre exemple :

:root {
  --r:0;
  --g:0;
  --b:255;
  --color:rgb(var(--r),var(--g),var(--b))
}
div {
  color:var(--color);
}
p {
  --g:100;
  color:var(--color);
}

<div>
  some text
</div>
<p>
  some text
</p>

:root 级别定义的 3 个变量之一来更改 --colorIntuitivement, nous pourrions penser que nous pouvons changer --color en changeant l'une des 3 variables définies au niveau

, mais nous ne pouvons pas le faire et le code d'action ci-dessus est le même que celui-ci :

:root {
  --color:rgb(0,0,255)
}
div {
  color:var(--color);
}
p {
  --g:100;
  color:var(--color);
}

<div>
  some text
</div>
<p>
  some text
</p>

--r、--g、--b）在 :root3 variables (--r, --g, --b) sont évaluées dans

code> nous les avons donc utilisées. Les valeurs remplacez-les.

Dans ce cas nous avons 3 possibilités :

• :rootUtilisez JS ou d'autres règles CSS pour modifier les variables dans
. Cela ne nous permet pas d'avoir des couleurs différentes :

:root {
  --r:0;
  --g:0;
  --b:255;
  --color:rgb(var(--r),var(--g),var(--b))
}
div {
  color:var(--color);
}
p {
  --g:200; /*this will not have any effect !*/
  color:var(--color);
}

:root {
  --g:200; /*this will work*/
}

<div>
  some text
</div>
<p>
  some text
</p>

🎜

• Évaluez à nouveau la variable dans l'élément requis. Dans ce cas on perd toute flexibilité et la définition à l'intérieur de :root deviendra inutile (ou du moins deviendra la définition par défaut) :

:root {
  --r:0;
  --g:0;
  --b:255;
  --color:rgb(var(--r),var(--g),var(--b))
}
div {
  color:var(--color);
}
p {
  --g:200;
  --color:rgb(var(--r),var(--g),var(--b));
  color:var(--color);
}

<div>
  some text
</div>
<p>
  some text
</p>

• Changez le sélecteur :root 选择器更改为通用选择器 * par le sélecteur universel *. Cela garantira que nos fonctions sont définies et évaluées à tous les niveaux. Dans certains cas complexes, cela peut produire des résultats indésirables

* {
  --r:0;
  --g:0;
  --b:255;
  --color:rgb(var(--r),var(--g),var(--b))
}
div {
  color:var(--color);
}
p {
  --g:200;
  color:var(--color);
}

<div>
  some text
</div>
<p>
  some text
</p>

---

Dans cet esprit, nous devons toujours maintenir l'évaluation au point le plus bas possible dans l'arborescence DOM, surtout après qu'une variable a changé (ou au même niveau)

C'est quelque chose que nous ne devrions pas faire

:root {
  --r: 0;
  --g: 0;
  --b: 0;
}
.color {
  --color: rgb(var(--r), var(--g), var(--b))
}
.green {
  --g: 255;
}
.red {
  --r: 255;
}
p {
  color: var(--color);
}

h1 {
  border-bottom: 1px solid var(--color);
}

<div class="color">
  <h1 class="red">Red </h1>
  <p class="red">I want to be red :(</p>
</div>
<div class="color">
  <h1 class="green">Green </h1>
  <p class="green">I want to be green :(</p>
</div>

C'est ce que nous devrions faire

:root {
  --r:0;
  --g:0;
  --b:0;
}
.color {
  --color:rgb(var(--r),var(--g),var(--b));
}

.green {
  --g:255;
}

.red {
  --r:255;
}

p {
  color:var(--color);
}
h1 {
  border-bottom: 1px solid var(--color);
}

<div class="red">
  <h1 class="color">Red title</h1>
  <p class="color">Yes I am red :D</p>
</div>
<div class="green">
  <h1 class="color">Green title</h1>
  <p class="color">Yes I am green :D</p>
</div>

Nous pouvons aussi faire ceci :

:root {
  --r:0;
  --g:0;
  --b:0;
}
.color {
  --color:rgb(var(--r),var(--g),var(--b));
}

.green {
  --g:255;
}

.red {
  --r:255;
}

p {
  color:var(--color);
}
h1 {
  border-bottom: 1px solid var(--color);
}

<div class="red color">
  <h1 >Red title</h1>
  <p >Yes I am red :D</p>
</div>
<div class="green color">
  <h1>Green title</h1>
  <p >Yes I am green :D</p>
</div>