1. 首頁 > 生活百科 > >

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

小知識it知識

以上的示范都不能工作 。 第一個和第二個都有無效值，因為它們都有嵌套依賴 。 最后一個例子，padding 和 margin 都是 20px，因為級聯會獲取第二個 --s: 20px 的變量去應用 。
這很不幸，你應該停止用 C++, Javascript, Java 等語言的思維去思考 CSS 變量，因為它們有自己邏輯的自定義屬性 。
9. 它們只能從父元素傳遞給子元素
請記住這個黃金規則：CSS 變量總是從父元素（或者說祖先元素）傳遞給子元素，不會從子元素傳遞給父元素或兄弟元素 。
:root { --c1: red; --c2: blue; --grad: linear-gradient(var(--c1),var(--c2);}.box { --c1: green; background:var(--grad);}你可以會認為 .box 背景顏色是 linear-gradient(green, blue) ? 不，背景顏色會是 linear-gradient(red, blue) 。
root 元素是 DOM 元素的最上層，所以它是 box 的祖先元素，我們應用上面的黃金規則知道，子元素的 --c1 是跑不到 linear-gradient(var(--c1),var(--c2) 中的 。
10. 它們可以有奇怪的語法
最后一個也是有趣的一個 。
你知道你能像下面這樣寫么？
body { --:red; background:var(--);}很神奇，對吧？是的，CSS 變量可以僅使用兩節虛線定義 。
你會認為上面已經很瘋狂了？看下下面這個：
body { --?:red; --?:green; --?:blue; --?:orange;}是的，你還可以用表情來定義一個變量 。
CSS 變量允許你以 -- 開頭的任何內容 。 比如：
body { ---------:red; background:var(---------);}又比如：
body { --?:red; --?:blue; background:linear-gradient(90deg, var(--?),var(--?));}其實上面是這樣的：

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

文章插圖

當然你不會使用這么稀奇古怪的東西在你的實際項目中，除非你想讓你的老板或合作開發者發瘋
總結
不知不覺有很多的內容了，你不需要馬上就記住所有的內容 。 我盡力將這些不為人知的 CSS 變量整理了出來 。 如果有一天你工作中需要這些知識點，你可以回頭來看 。
英文原文地址：https://dev.to/afif/what-no-one-told-you-about-css-variables-553o
本文是譯文，采用意譯 。
（學習視頻分享：web前端）
以上就是關于 CSS 變量的一些你可能不了解的事！的詳細內容，更多請關注電腦自學網其它相關文章！
【關于 CSS 變量的一些你可能不了解的事！】

推薦閱讀