1. 首頁 > 生活百科 > >

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

小知識it知識

本篇文章帶大家了解一下CSS 變量，介紹下沒人告訴你關于 CSS 變量的那些事 。 有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助 。

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

文章插圖

CSS 變量很不錯哦，但是你知道它們的詳情？【推薦學習：css視頻教程】
1. 小心 !important
與 CSS 變量一起使用 !important 有點詭異，如下面的示范：
p { --color:red !important; color:var(--color); color:blue;}上面的 p 元素會是什么顏色呢？你會認為是 red 紅色吧，認為按如下代碼執行：
p { color: red !important; color: blue;}但是，并不是 red 紅色，因為實際執行是這樣：
p { color: red; color: blue;}在這種情況下，!important 并不是 color 的一部分，而是增加了 --color 變量的特性 。 規范中指明：
注意：自定義屬性可以包含 !important ，但是會被 CSS 解析器自動從屬性中刪除，這將自定義的屬性 important 變成層級 。 換言之， !important 并不是不會起作用，而是在語法檢查之前就被忽略了 。
下面這個例子你會更容易明白：
p { --color: red !important; --color: blue; color: var(--color);}上面的代碼會賦予 p 元素紅色，解析如下：
    我們對 --color 屬性有兩次的聲明，所以我們需要解決其層級的問題 。 第一次的定義帶有 !important ，所以它的層級相對高
    接著 var(--color) 將會應用 red !important
    所以我們會得到 color: red
再來看一段代碼：
p{ --color: red !important; --color: blue; color:var(--color); color: pink; <!-- 這里我改寫的顏色值 -->}按照上面的邏輯，我們最后會得到粉紅色 pink 的段落顏色 。
一個很重要的規則是應當將 CSS 變量（自定義屬性）看作普通屬性，而不僅僅是存儲值的變量 。
自定義屬性是普通屬性，所以它們可以被定義在任何的元素上，可以使用普通屬性的繼承和聯級規則解決，可以使用 @media 和其他條件規則進行條件處理，可以用于 HTML 的 style 屬性，可使用 CSSDOM 讀取和設置等等 。
2. 它們不可以存儲 urls
總有一天你會偶然發現這個常見的限制 。
你不能這樣做 ❌
:root { --url:"https://picsum.photos/id/1/200/300";}.box { background:url(var(--url));}你應該這樣做 ✅
:root { --url:url("https://picsum.photos/id/1/200/300");}.box { background:var(--url);}這個限制有關 url() 是怎么解析的 。 解析起來有點棘手，推薦你到 Stack Overflow Answer 上找答案 。 正如你所見，我們修復起來很容易，把 url() 整個賦予變量即可 。
3. 它們可以無效的值變有效
這也是我喜歡的點之一，也是讓人頭疼的點 。
我們以一個基礎的案例入手：
.box { background: red; background: linaer-gradient(red, blue);}.box 元素將會有一個紅藍漸變的效果，對吧？然而卻是純紅色 。 嗯，我打錯了 linear-* 。 我可以很容易發現這個錯誤，因為瀏覽器劃掉了這一行并啟用了上一行的背景樣式 。
關于 CSS 變量的一些你可能不了解的事！

文章插圖

現在，讓我們來介紹變量：
.box { --color:red; background: var(--color); background: linaer-gradient(var(--color), blue);}測試這段代碼，你會發現背景顏色變成了透明 。 我們的第二個背景顏色并沒有被瀏覽器劃掉，反而是第一個背景樣式被劃掉了 。 因為第二個背景樣式重寫了第一個 。
關于 CSS 變量的一些你可能不了解的事！

文章插圖

為什么會發生這樣的事情 ？
當我們使用變量作為屬性，瀏覽器只會在 "計算值時間" 去評估值，因為我們需要首先知道變量的內容 。 在這種例子中，當瀏覽器做聯級時，會認為屬性值是有效的，之后才會變成無效 。
在我們的例子中，瀏覽器做級聯時，認為最后一個聲明是有效的 。 但是到評估值的時候，最后一個聲明被認定是無效的，所以它被忽略 。 我們不會回頭查看，因為我們在級聯的時候已經處理過了，所以我們最后會得到一個透明的背景顏色 。
你可能認為這種行為不符合邏輯的，但是它確符合邏輯 。 因為一個值是有效還是無效時基于

推薦閱讀