Sifat tersuai skop CSS tidak dikenali apabila digunakan untuk menilai pembolehubah dalam skop induk

Question

Saya cuba menskalakan saiz melalui var sifat tersuai supaya kelas boleh digubah tanpa gandingan. Kesan yang diingini ialah 3 senarai akan mempunyai 3 skala berbeza, tetapi seperti yang ditunjukkan pada CodePen, kesemua 3 senarai mempunyai skala yang sama. Saya sedang mencari penjelasan tentang skop dan teknik sifat tersuai CSS yang boleh mencapainya dengan kod yang boleh digubah dan digandingkan secara longgar.

: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

Dalam kes anda, anda telah menilai --scale 自定义属性来定义 --size-* 属性，然后定义了 --scale di peringkat akar sekali lagi di dalam elemen kanak-kanak. Ini tidak akan mencetuskan penilaian lagi kerana ia sudah dilakukan di lapisan atas.

Berikut adalah contoh mudah untuk menggambarkan masalah ini:

.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>

Untuk menyelesaikan masalah anda, anda perlu mentakrifkan pengisytiharan dari :root 移至与 --scale ke tahap yang sama:

.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>

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

---

Dari Spesifikasi:

Dalam kes pertama, anda terperangkap pada 3 kerana tiada nilai ditentukan untuk --skala pada peringkat akar. Dalam kes terakhir, kami terperangkap pada --scale指定值。在最后一种情况下，我们陷入了2，因为我们在同一级别定义了--scale2

kerana kami menentukan --skala pada tahap yang sama dan kami mempunyai nilainya.

---

:rootDalam semua kes kita harus mengelakkan sebarang penilaian di peringkat

kerana ia tidak berguna. Tahap akar ialah tahap teratas dalam DOM, jadi semua elemen akan mewarisi nilai yang sama, adalah mustahil untuk mempunyai nilai yang berbeza dalam DOM melainkan kita menilai semula pembolehubah itu.

Kod anda bersamaan dengan kod ini:

---

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

Mari beri contoh lain:

: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 个变量之一来更改 --colorSecara intuitif, kita mungkin berfikir bahawa kita boleh menukar --warna dengan menukar salah satu daripada 3 pembolehubah yang ditakrifkan pada tahap

, tetapi kita tidak boleh melakukan ini dan kod tindakan di atas adalah sama seperti ini:

: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 pembolehubah (--r, --g, --b) dinilai dalam

kod> jadi kami telah menggunakannya Nilai menggantikan mereka.

Dalam kes ini kita ada 3 kemungkinan:

• :rootGunakan JS atau peraturan CSS lain untuk menukar pembolehubah dalam
. Ini tidak membenarkan kita mempunyai warna yang berbeza:

: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>

🎜

• Nilai pembolehubah sekali lagi dalam elemen yang diperlukan. Dalam kes ini, kita kehilangan sebarang fleksibiliti dan definisi di dalam :root akan menjadi tidak berguna (atau sekurang-kurangnya akan menjadi lalai):

: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>

• Tukar pemilih :root 选择器更改为通用选择器 * kepada pemilih universal *. Ini akan memastikan bahawa fungsi kami ditakrifkan dan dinilai di semua peringkat. Dalam sesetengah kes yang rumit ini mungkin menghasilkan beberapa keputusan yang tidak diingini

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

---

Dengan mengambil kira perkara ini, kita harus sentiasa mengekalkan penilaian ke tahap paling rendah yang mungkin dalam pepohon DOM, terutamanya selepas pembolehubah berubah (atau pada tahap yang sama)

Ini adalah sesuatu yang kita tidak patut lakukan

: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>

Inilah yang patut kita lakukan

: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>

Kita juga boleh melakukan ini:

: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>