1. 首頁 > 生活百科 > >

關于 CSS 變量的一些你可能不了解的事！( 二 )

小知識it知識

CSS 變量的，所以瀏覽器一開始時不能真正知道 。
.box { --color:10px; /* a "valid" variable */ background: red; /* a "valid" declaration */ background:linear-gradient(var(--color),blue); /* a "valid" declaration that will override the first one */ /* The result is an "invalid" value ... */ }

如果一個屬性包含一個或者更多的 var() 函數，而且這些函數都是語法有效的，必須假定整個屬性的語法在解析時有效 。 當 var() 函數被替代后，在“計算值時間”才做語法檢查 。
簡單來說：CSS 變量將屬性的狀態作為一個后備，知道我們對其進行評估值 。 當評估值之后，我們可以說它是有效的或者無效的了 。 如果它是無效的，那么久太晚了，因為我們不會再回頭使用上一個 。
4. 它們可以不被使用單位
大多數的教材或課程都會展示下面的代碼給你：
:root { --p: 10px;}.box { padding: var(--p);}但是，你也可以這么做：
:root { --p: 10;}.box { padding: calc(var(--p)*1px);}變量中擁有單位并不是強制的 。
5. 他們可以動起來
最初，CSS 變量被定義是沒有動畫屬性的 。
Animatable: no
但是，事情發生了變化，我們通過 @property 修飾，CSS 變量可以做一些動畫或者漸變 。 這個特性目前瀏覽器支持比較低，但是也是時候了解下了 。
6. 它們不可以存儲 inherit 值
我們考慮下面的例子：
<div class="box"> <div class="item"></div></div>.box { border:2px solid red;}.item { --b:inherit; border:var(--b);}直覺告訴我們，.item 將會即成父元素的 border，因為 --b 包含 inherit，但是并不是 。
正如我們在第1點上說到的，我們錯誤認為 CSS 變量會簡單存儲值，然后供我們往后使用，然而并不會 。 CSS 變量（自定義的屬性）是普通屬性，所以 inherit 會被應用并不會存儲值 。
例子：
.box { --b:5px solid blue; /* we define the variable on the parent */}.item { --b:inherit; /* the child will inherit the same value so "5px solid blue"*/ border:var(--b); /* we will have "5px solid blue" */}正如你所看到的，公共屬性應用，邏輯上才可以繼承 inherit 。
上面的寫法是雞肋的，因為 CSS 變量默認是繼承的 。
7. 它們可以是空值
是的，你可以想下面這么做：
.box { --color: ; background:var(--color); }
筆記：<declatation-value> 聲明值必須代表一個標記，所以變量空值需要有一個空格 。 比如 --foo: ; 是有效的，var(--foo) 將會返回一個空格 。 --foo:; 是無效的 。 如下：
.box { --color:; ❌ background:var(--color); }
關于 CSS 變量的一些你可能不了解的事！

文章插圖

這個小技巧可以配合預設特性實現一些想不到的效果 。
一個例子你就會明白這個技巧：
.box { background: linear-gradient(blue,transparent) var(--color,red); # 沒有發現--color，取默認值 red}<div class="box"> I will have `background:linear-gradient(blue,transparent) red;`</div><div class="box" style="--color:green"> I will have `background:linear-gradient(blue,transparent) green;`</div><div class="box" style="--color: ;"> I will have `background:linear-gradient(blue,transparent) ;`</div>
    第一個 box 沒有定義變量，所以預設值被使用
    第二個有定義的變量，所以它被使用
    最后一個設定了一個空的變量值，所以空值被使用 。 使用后就好比不需要 var(--color, red) 一樣
空值允許我們移除屬性中 var() 聲明，在一個復雜的值中使用 var() 作用挺大 。
8. CSS 變量不是 C++ 變量
很不幸的是，很多開發者趨向于比較 CSS 變量和其他語言的變量，然后在他們邏輯上有一大堆的問題 。 正是這個原因，我都不想叫他們變量而是自定義屬性，因為他們確實是屬性 。
很多人都想這么做：
:root { --p:5px; --p:calc(var(--p) + 1px); /* let's increment by 1px */}:root { --x: 5px; --y: 10px; /* let's do a variable switch */ --c: var(--y); --y: var(--x); --x: var(--c);}.box { --s: 10px; margin:var(--s); /* I want 10px of margin */ --s: 20px; padding:var(--s): /* then 20px of padding */}

推薦閱讀