用于計(jì)算外部作用域中的變量時(shí)，CSS作用域定制屬性被忽略我試圖通過var自定義屬性來縮放大小，這種方式可以在沒有耦合的情況下構(gòu)成類。期望的效果是3個(gè)列表將是3個(gè)不同的比例，但是如CodePen所示，所有3個(gè)列表都是相同的比例。我正在尋找范圍的解釋和CSS自定義屬性技術(shù)，可以使用可組合的松散耦合代碼實(shí)現(xiàn)這一點(diǎn)。: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>
2 回答
當(dāng)年話下
TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊
這很棘手，但在您的情況下，您已經(jīng)--scale在根級(jí)別評(píng)估了自定義屬性以定義--size-*屬性，然后您--scale 再次定義了內(nèi)部子元素。這不會(huì)再次觸發(fā)評(píng)估，因?yàn)樗呀?jīng)在較高級(jí)別完成。
這是一個(gè)簡(jiǎn)單的例子來說明這個(gè)問題：
.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>
要解決您的問題，您需要將聲明從定義移至:root相同級(jí)別--scale：
.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>
在這種情況下，--scale定義在與其評(píng)估相同的級(jí)別，因此--size-*將針對(duì)每種情況正確定義。
從規(guī)格：
要在屬性值中替換var（）：
如果var（）函數(shù)的第一個(gè)參數(shù)指定的自定義屬性是動(dòng)畫污染的，并且var（）函數(shù)正在動(dòng)畫屬性或其中一個(gè)長整數(shù)中使用，請(qǐng)將自定義屬性視為具有其初始值。其余的這個(gè)算法。
如果var（）函數(shù)的第一個(gè)參數(shù)指定的自定義屬性的值不是初始值，則將var（）函數(shù)替換為相應(yīng)自定義屬性的值。除此以外，
如果var（）函數(shù)的回退值作為其第二個(gè)參數(shù)，則用回退值替換var（）函數(shù)。如果后備中有任何var（）引用，也可以替換它們。
否則，包含var（）函數(shù)的屬性在計(jì)算值時(shí)間無效
在您的第一種情況下，您將落入3，因?yàn)?code>--scale在根級(jí)別沒有指定值。在最后一種情況下，我們將陷入2，因?yàn)槲覀?code>--scale在同一級(jí)別定義并且我們有其價(jià)值。
在所有情況下，我們應(yīng)該避免任何:root級(jí)別的評(píng)估，因?yàn)樗緵]用。根級(jí)別是DOM中的最高級(jí)別，因此所有元素都將繼承相同的值，除非我們?cè)俅卧u(píng)估變量，否則不可能在DOM內(nèi)部具有不同的值。
您的代碼與此代碼相同：
:root {
--size-1: calc(1 * 1 * 1rem);
--size-2: calc(2 * 1 * 1rem);
--size-3: calc(3 * 1 * 1rem);}讓我們?cè)倏匆粋€(gè)例子：
: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>
直覺上，我們可能認(rèn)為我們可以--color通過改變?cè)?code>:root級(jí)別定義的3個(gè)變量之一來改變它，但我們不能這樣做，上面的代碼與這個(gè)相同：
:root {
--color:rgb(0,0,255)}div {
color:var(--color);}p {
--g:100;
color:var(--color);}<div> some text</div><p> some text</p>
該3個(gè)變量（--r，--g，--b）進(jìn)行評(píng)估里面:root，所以我們已經(jīng)與他們的價(jià)值觀取代他們。
在這種情況下，我們有兩種可能性：
更改
:root使用JS或其他CSS規(guī)則中的變量。這不允許我們有不同的顏色：
: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>
在所需元素內(nèi)再次評(píng)估變量。在這種情況下，我們將失去任何靈活性，內(nèi)部的定義
:root將變得無用（或至少將成為默認(rèn)值）：
: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>
考慮到這一點(diǎn)，我們應(yīng)該始終將評(píng)估保持在DOM樹中的最低點(diǎn)，尤其是在變量發(fā)生變化之后（或者在同一級(jí)別）
這是我們不應(yīng)該做的
: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>
這是我們應(yīng)該做的
: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>
我們也可以這樣做：
: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>
叮當(dāng)貓咪
TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊
因?yàn)镃SS從上到下...假設(shè)您使用的是繼承，父元素是否可以從其子元素繼承？不...這里的邏輯相同，根在評(píng)估時(shí)看不到--scale屬性。因此，如果一個(gè)子元素改變了一個(gè)屬性，我們就不會(huì)反過來重新評(píng)估所有的父屬性，這將創(chuàng)建周期并且它將無法工作
添加回答
舉報(bào)
0/150
提交
取消