久久一区二区三区超碰国产精品,亚洲人成在线网站,国产在线精品一区免费香蕉,国产精品免费电影

專(zhuān)欄介紹

“頂級(jí)寫(xiě)手”是OPPO工程師解讀最新熱點(diǎn)技術(shù)的專(zhuān)欄，在這里你不僅可以看到最新最熱的動(dòng)態(tài)，還能和OPPO優(yōu)秀的工程師一起學(xué)習(xí)技術(shù)知識(shí)。

頂級(jí)作家

■鮑勃

■一位在前端領(lǐng)域耕耘9年多的前端“新生代IT民工”，立志分享各種前端酷知識(shí)。

01

背景

相信用過(guò) UI 框架的同學(xué)應(yīng)該或多或少都修改過(guò)它的樣式，最常見(jiàn)需要修改的樣式應(yīng)該就是：顏色。大多數(shù)情況下，官方框架可能會(huì)提供主題配置，比如主題顏色配置（使用 Sass 變量）或者 Ant 主題顏色配置（使用 Less 變量）。你可以定義 @-color(Ant) 或者 $--color-() 這樣的變量來(lái)定制想要的主題顏色，比如 OPPO 綠色。

但相信大家都經(jīng)歷過(guò)這種情況，因?yàn)槭墙柚?CSS 預(yù)處理器的能力，而非原生的 CSS 支持，這不僅意味著需要打包工具的支持，也意味著這些變量并不是真正的“變量”。它們?cè)诖虬鼤r(shí)會(huì)被替換成 CSS 能夠識(shí)別的顏色值，無(wú)法再通過(guò)改變其中一種 - 來(lái)改變頁(yè)面上所有相關(guān)的顏色。對(duì)于只使用一套 OPPO 綠色的場(chǎng)景來(lái)說(shuō)這還好，但如果要改變動(dòng)態(tài)主題色怎么辦？或者像夜間模式這種需要改變顏色的場(chǎng)景怎么辦？這對(duì)于 CSS 來(lái)說(shuō)其實(shí)并不容易。

使用 CSS 不是不可以，只是開(kāi)發(fā)體驗(yàn)不好。比如可以為不同的主題設(shè)置不同的 class，并根據(jù)這些不同的 class 將所有使用顏色的地方重寫(xiě)。試想一下，業(yè)務(wù) CSS 中有 20 個(gè)地方用到了主題顏色custom什么意思，每增加一套主題，就需要重寫(xiě)這 20 個(gè)地方的顏色定義。這其實(shí)也是我們之前常用的方法。

當(dāng)然，也有辦法將瀏覽器版的CSS預(yù)處理器嵌入到頁(yè)面中，如果你已經(jīng)在網(wǎng)上使用過(guò)這種方法，或者有這樣的想法，請(qǐng)務(wù)必看完本文，思考是否還有其他方法。

遇到需要?jiǎng)討B(tài)更換主題的同學(xué)肯定都搜索過(guò)并了解過(guò)CSS自定義變量的概念，如果你還沒(méi)有用過(guò)，不用擔(dān)心，看完你就懂了。

不知道大家有沒(méi)有注意到，標(biāo)題里有一個(gè)奇怪的---，和變量定義方式$--color-很像。那么這是什么呢？CSS自定義變量就是這么定義的。

02

基本定義

我們先來(lái)看一下基本的定義。CSS自定義變量由兩部分組成 - 加一個(gè)名稱(chēng)。名稱(chēng)和變量名規(guī)則差不多，比如區(qū)分大小寫(xiě)（這個(gè)和普通的CSS屬性名不同，CSS屬性名一般不區(qū)分大小寫(xiě)），但不同之處在于CSS自定義變量名可以以數(shù)字開(kāi)頭，包括純數(shù)字，例如-1就是合法的CSS自定義變量，甚至允許使用漢字，甚至允許使用表情符號(hào)。

正如那句老話(huà)所說(shuō)：你能做某件事并不意味著你應(yīng)該做它。想想當(dāng)你看到有人在別人的代碼中寫(xiě)了 --1: 5px, --2: red，然后毫無(wú)理由地到處使用 --1 和 --2 時(shí)，試著表達(dá)你的感受。

其實(shí) CSS 規(guī)范和 MDN 文檔中都使用了“自定義屬性”這個(gè)術(shù)語(yǔ)，但是“自定義屬性”看起來(lái)不如“自定義變量”那么清晰吸引人，所以本文使用了“自定義變量”這個(gè)術(shù)語(yǔ)。請(qǐng)記住它對(duì)應(yīng)的是“自定義屬性”或者規(guī)范中提到的與變量相關(guān)的術(shù)語(yǔ)：“自定義變量”。

這里之所以可以是數(shù)字開(kāi)頭，也可以是純數(shù)字，準(zhǔn)確的說(shuō)是因?yàn)榍懊嬗幸粋€(gè)--，這個(gè)--不能算是一個(gè)變量名，因?yàn)閷?shí)際的名字應(yīng)該包含整個(gè)--。

但是，有了名字并不代表變量就可以用，需要賦值才有用。而且，CSS自定義變量必須存在于CSS的一定的元素規(guī)則定義中，不能像全局變量那樣寫(xiě)在最外層。當(dāng)然，全局變量也有相應(yīng)的定義方式，后面會(huì)提到。所以CSS自定義變量的完整定義應(yīng)該是：

:root {  --custom-variable: ;}
/* 舉幾個(gè)栗子 */html {  --color-primary: green;  --color-disabled: gray;  --wide-border: 3px;}

除了在CSS文件、樣式屬性、對(duì)應(yīng)方法中定義外，請(qǐng)注意，這也是在“某一元素規(guī)則的定義”中，因?yàn)樗粚?duì)該屬性所在的元素及其子元素有效。

03

使用自定義變量

用法

好的，現(xiàn)在我們有了一個(gè)有效的 CSS 自定義變量，如何使用它？CSS 定義了 var() 方法，例如，您可以使用 var(--color-) 來(lái)讀取它。因此，可以像這樣設(shè)置具有淺綠色背景的 div 的樣式：

div {  background-color: var(--color-primary);}

var() 方法也支持默認(rèn)值，當(dāng)對(duì)應(yīng)變量 或者 value 為 時(shí)，會(huì)讀取默認(rèn)值。定義很簡(jiǎn)單，用 隔開(kāi)，后面的值就是默認(rèn)值。例如 var(--color-,blue)，當(dāng) --color- 或者 value 等于 時(shí)，會(huì)返回 blue。

但請(qǐng)注意，如果有多個(gè)逗號(hào)，則第一個(gè)逗號(hào)后面的整個(gè)值將作為默認(rèn)值，而不是用逗號(hào)分隔。所以 var(--color-,blue,cyan) 的默認(rèn)值是 blue, cyan。

在定義自定義變量的時(shí)候，還可以使用其他自定義變量。同時(shí)，var() 支持多層嵌套，因此默認(rèn)值也可以是另一個(gè)自定義變量。例如以下形式：

div.bordered {  --color-border: var(--color-secondary, green);  /* 注意 --color-secondary 并未定義 */  border: var(--wide-border) var(--color-border) solid;  color: var(--color-text, var(--color-disabled, black));}

看到這里，大家應(yīng)該知道怎么用了，但是為什么說(shuō)了這么久，好像跟 CSS 預(yù)處理器的變量定義沒(méi)什么區(qū)別。好啦，別著急，我先問(wèn)大家，還記得 CSS 縮寫(xiě)里的 C 代表什么嗎？沒(méi)錯(cuò)，就是“”：“”。這個(gè)詞也是 CSS 的獨(dú)特魅力所在，也是最容易讓人混淆的部分。不過(guò)，相信看文章的大家應(yīng)該對(duì) 的優(yōu)先級(jí)很熟悉了，如果不熟悉的話(huà)趕緊復(fù)習(xí)一下吧。為什么突然提到它呢？因?yàn)?CSS 自定義變量也遵循了 的概念。相同的變量定義會(huì)默認(rèn)繼承，優(yōu)先級(jí)高的定義會(huì)覆蓋優(yōu)先級(jí)低的定義。這也是變量能“動(dòng)態(tài)”改變其值的重要原因。

那么思考一下，如果前面所有的代碼塊都是在同一個(gè)頁(yè)面中依次定義，而頁(yè)面中有一個(gè)div和一個(gè)div，那么它們應(yīng)該分別如何顯示呢？

了解了用法之后，假設(shè)你需要為這個(gè)頁(yè)面添加多個(gè)主題樣式，結(jié)合上面提到的級(jí)聯(lián)，你想到怎么添加了嗎？沒(méi)錯(cuò)，我們可以用新樣式覆蓋變量：

.pink-theme {    --color-primary: pink;    --color-border: deeppink;}.gold-theme {    --color-primary: gold;    --color-border: goldenrod;}/* 還可以加更多 */

當(dāng)然如果你不想添加class的話(huà)，也可以直接將樣式寫(xiě)在對(duì)應(yīng)的標(biāo)簽上來(lái)覆蓋。

正如文章開(kāi)頭所說(shuō)，這種動(dòng)態(tài)改變 CSS 中變量的值的功能在 CSS 預(yù)處理器中是無(wú)法輕易做到的，因?yàn)樗鼈兊淖兞慷x就像它們的名字一樣，都是經(jīng)過(guò)預(yù)先處理并放置在 CSS 中的。這也是 CSS 自定義變量相較于預(yù)處理器的一大優(yōu)勢(shì)。

全局變量

看完前面的使用部分，大家有沒(méi)有搞清楚如何定義一個(gè)全局的 CSS 變量呢？因?yàn)樽远x變量默認(rèn)是被繼承的，所以簡(jiǎn)單來(lái)說(shuō)就是把樣式放到覆蓋范圍最廣的根元素上，也就是 HTML 中的元素上（其實(shí)一般情況下放在那里應(yīng)該就可以了）。

上例中寫(xiě)了一個(gè) :root 偽類(lèi)，這個(gè)偽類(lèi)也引用了根元素，在 HTML 中也引用了 html 元素，這有什么區(qū)別呢？比如下面的定義中，div 的背景應(yīng)該是什么顏色呢？

:root {  --color-bg: red;}html {  --color-bg: blue;}div {  background-color: var(--color-bg);}

如果你看實(shí)際的頁(yè)面，會(huì)發(fā)現(xiàn)是紅色的。為什么呢？:root 是偽類(lèi)，所以是類(lèi)的優(yōu)先級(jí)?；叵胍幌聝?yōu)先級(jí)的定義，類(lèi)的優(yōu)先級(jí)要高于元素類(lèi)型選擇器的 html。

除了這種通過(guò)繼承來(lái)增加覆蓋率的形式之外，還有一種定義全局變量的方式，后面會(huì)提到。首先我們來(lái)看幾個(gè)問(wèn)題。

無(wú)效值

從上面的用法來(lái)看，一般情況下，CSS 自定義變量可以簡(jiǎn)單理解為在調(diào)用 var() 的地方將其值替換為文本，但在實(shí)現(xiàn)上還是有些區(qū)別的。拋開(kāi) CSS 解析計(jì)算過(guò)程的細(xì)節(jié)不談，可以看作是 CSS 解析器忽略了使用自定義變量的屬性值的語(yǔ)法檢查，即不管該值本身是否可以在對(duì)應(yīng)屬性中使用。所以即使給自定義變量傳遞了非法值，這個(gè)屬性還是會(huì)被正常解析，只是在計(jì)算值的時(shí)候會(huì)出錯(cuò)；這不同于直接寫(xiě)入非法值，CSS 解析器會(huì)提前檢測(cè)到語(yǔ)法錯(cuò)誤并忽略這條規(guī)則。

這樣可能有點(diǎn)讓人困惑，我們以MDN上的例子為例，做一個(gè)簡(jiǎn)單的擴(kuò)展：

:root { --text-color: 16px; }p { color: blue; }p { color: var(--text-color); }
div { color: blue; }div { color: 16px; }

如果你打開(kāi) demo 頁(yè)面，會(huì)發(fā)現(xiàn)第一行〈p〉是黑色的，而第二行〈div〉是藍(lán)色的。這是因?yàn)樵谑褂?CSS 自定義變量的〈p〉定義中，color:var(--text-color)被正常解析，覆蓋了之前定義的color:blue（CSS 解析器一般會(huì)直接丟棄這個(gè)沒(méi)用的規(guī)則定義）。然后在替換-text-color 的時(shí)候發(fā)現(xiàn)它不是一個(gè)值，不是合法的顏色，導(dǎo)致〈p〉元素的顏色定義被非法重置。因?yàn)閏olor是繼承的屬性，所以〈p〉會(huì)首先嘗試取繼承的值。由于 demo 中上沒(méi)有定義color，所以使用了繼承的瀏覽器默認(rèn)樣式color:black。這里因?yàn)閏olor:16px在解析過(guò)程中被瀏覽器認(rèn)為是非法的而被忽略，所以選擇了之前有效的定義color:blue。

無(wú)效值重置和 CSS 全局關(guān)鍵字中 unset 的效果一致custom什么意思，即對(duì)繼承的屬性啟用 unset 時(shí)相當(dāng)于繼承父級(jí)，對(duì)繼承的屬性禁用 unset 時(shí)相當(dāng)于初始值。這三個(gè)字也是 CSS 的三個(gè)全局關(guān)鍵字。另外請(qǐng)注意，這三個(gè)關(guān)鍵字在使用自定義變量時(shí)也是有效的，將自定義變量值設(shè)置給它們時(shí)，就意味著對(duì)這個(gè)自定義變量執(zhí)行 unset，以及操作：

:root {  --text-color: green;  color: red;}div {  --text-color: inherit;  color: var(--text-color);}

在上面的例子中，div的文字顏色會(huì)是綠色而不是紅色，因?yàn)檫@意味著自定義變量是從父級(jí)繼承下來(lái)的，也就是--text-color的值被計(jì)算為綠色，而不是用color:;替換后續(xù)color屬性的文字。

另一個(gè)具有此功能的關(guān)鍵字可能是臭名昭著的 !。當(dāng)用于自定義變量時(shí)，它還意味著自定義變量本身具有 ! 的優(yōu)先級(jí)，而不是將其替換為文本。我不會(huì)為此寫(xiě)一個(gè)例子，我留給你自己去嘗試。

因?yàn)椴皇俏谋咎鎿Q，所以有些地方不能寫(xiě)自定義變量。比如不能寫(xiě)自定義變量來(lái)替換 CSS 屬性名，也不能把值中的數(shù)字和單位分開(kāi)留學(xué)之路，用自定義變量替換：

:root {  --property-name: padding;  --padding:10;}
p {   var(--property-name):100px;/* 語(yǔ)法錯(cuò)誤，忽略 */}p {   padding:10px;   padding:var(--padding)px;  /* 正常解析但計(jì)算值失敗，等同于 padding: unset，所以前一條規(guī)則會(huì)被覆蓋 */}p.correct {   padding: calc(var(--padding)*1px);  /* 注意可以利用 calc() 來(lái)實(shí)現(xiàn)單位 */}

注意上面 p 的第二個(gè)定義 :10px; 是無(wú)效的，因?yàn)?var(--)px 在語(yǔ)法上不算無(wú)效，但實(shí)際計(jì)算時(shí)發(fā)現(xiàn)無(wú)法正確計(jì)算值，所以相當(dāng)于 unset 了。不過(guò)如果你確實(shí)想只定義一個(gè)數(shù)字，并且在使用時(shí)加上單位，也可以使用例子中的 calc() 方法來(lái)實(shí)現(xiàn)。

雖然您不能像本例一樣連接單元，但是您可以使用 CSS 自定義變量將屬性值拆分為多個(gè)部分值，這將在后面的示例中提到。

循環(huán)引用

CSS 自定義變量允許你在 var() 內(nèi)部嵌入另一個(gè) var()，但不可避免地存在一個(gè)問(wèn)題：

:root {  --margin:10px;}div {  --padding: calc(var(--margin)-10px);  margin:var(--margin);  padding:var(--padding);}div.cyclic {   --margin: calc(var(--padding)+10px);}

那么，div.的--和--該怎么解析呢？規(guī)范中定義，如果在同一個(gè)元素下發(fā)生循環(huán)引用，則本次循環(huán)內(nèi)的所有自定義變量都等于該值，也就是值。

注意關(guān)鍵字“同一元素”，因?yàn)樽远x變量默認(rèn)是繼承的，而繼承行為發(fā)生在值計(jì)算之后，所以不同元素下的定義不一定構(gòu)成循環(huán)引用，例如我們將最后一段定義改為div下的p：

:root {  --margin:20px;}div {  --padding: calc(var(--margin)-10px);  margin:var(--margin);  padding:var(--padding);  background:#f00;}div.cyclic p {   --margin: calc(var(--padding)+10px);   margin:var(--margin);   background:#0f0;}

在這個(gè)例子中，div.p的--可以正常計(jì)算得到20px，因?yàn)閜在計(jì)算--時(shí)，--繼承自div，而div已經(jīng)被計(jì)算為10px了。

更多示例

前面的例子中提到，CSS 自定義變量在取值時(shí)基本相當(dāng)于文本替換，沒(méi)有類(lèi)型的概念。這樣的操作在某些場(chǎng)景下也能出乎意料的方便，比如 CSS-Trick 上提到的例子：

button {  --h: 100;  --s: 50%;  --l: 50%;  --a: 1;    background: hsl(var(--h) var(--s) var(--l) / var(--a));}button:hover { /* Change the lightness on hover */  --l: 75%;}button:focus { /* Change the saturation on focus */  --s: 75%;}button[disabled] {  /* Make look disabled */  --s: 0%;  --a: 0.5;}

甚至有一種方法可以使用自定義變量作為開(kāi)關(guān)，但請(qǐng)謹(jǐn)慎使用......

這里只是給出一些簡(jiǎn)單的使用示例，相信很多同學(xué)在實(shí)際工作中，包括我們的項(xiàng)目中，都有自定義變量的情況。

04

關(guān)于動(dòng)畫(huà)

自定義變量是 CSS 屬性，因此可以在動(dòng)畫(huà)中使用。但是，由于它們沒(méi)有類(lèi)型，CSS 解析器不知道如何應(yīng)用動(dòng)畫(huà)樣式。效果不會(huì)像您預(yù)期的那樣：

.color-div {  --angle: 0deg;  background: linear-gradient(var(--angle), red, yellow, blue, purple);  animation: rotate 5s ease-in-out both alternate infinite;}@keyframes rotate {  to {    --angle: 180deg;   }}

打開(kāi)這個(gè) demo 你會(huì)發(fā)現(xiàn)背景并沒(méi)有“動(dòng)”，只是顏色跳動(dòng)了一下。其實(shí)這應(yīng)該符合預(yù)期，畢竟?jié)u變算是圖片，本身不支持動(dòng)畫(huà)。

其實(shí)一眼就能看懂這段 CSS 代碼想要表達(dá)什么，但是替換的方式讓自定義變量支持放在過(guò)渡動(dòng)畫(huà)、動(dòng)畫(huà)樣式中，其實(shí)并沒(méi)有什么用。不過(guò)這么明顯的問(wèn)題，規(guī)范已經(jīng)考慮到了，那么接下來(lái)我們看看他們是怎么解決這個(gè)問(wèn)題的呢？

定義全局變量的另一種方法（注冊(cè)）

鑒于CSS自定義變量的語(yǔ)法非常松散，無(wú)法定義其值類(lèi)型、是否繼承、及其初始值，這也導(dǎo)致無(wú)法很好實(shí)現(xiàn)動(dòng)畫(huà)等問(wèn)題，CSS增加了@來(lái)定義，或者更準(zhǔn)確的說(shuō)，使用（注冊(cè)）一個(gè)CSS自定義變量，可以設(shè)置其類(lèi)型（或者其遵循的語(yǔ)法）、是否繼承、及其初始值-value。結(jié)合上面的例子，我們來(lái)簡(jiǎn)單講解一下@的用法以及一些需要注意的地方。前面的例子只要加上這個(gè)定義聲明，就可以達(dá)到預(yù)期的效果了~

@property --angle { syntax: "";  inherits: false;??initial-value:?‘0deg’;}

同時(shí)@也有一個(gè)等價(jià)的接口可以調(diào)用，比如之前的聲明，可以使用如下方式實(shí)現(xiàn)：

CSS.registerProperty({  name: '--angle',??syntax:?'',??inherits:?false,??initialValue:?‘0deg’;});

從上面的示例和解釋來(lái)看，這些屬性的含義可能非常簡(jiǎn)單。 但是，使用它們時(shí)需要注意以下幾點(diǎn)：

●首先，與大多數(shù)@語(yǔ)句一樣，@目前必須出現(xiàn)在CSS的最外層，不能嵌套在其他樣式聲明中，也不能位于最內(nèi)層（但這種行為可能會(huì)改變，規(guī)范正在討論中）。它可以嵌套在條件@語(yǔ)句中，例如@media：

:root {  @property --primary-color {    /*不會(huì)生效*/  }}
@media (min-width: 1200px) {  @property --width {     /* 有效 */  }}

●其次，所有屬性都應(yīng)設(shè)置，否則整個(gè)定義將被忽略。唯一的例外是，當(dāng)屬性為*時(shí)，-value可以留空。不過(guò)，帶*的自定義變量的行為與普通定義基本相同。

●當(dāng)需要填寫(xiě) -value 時(shí)，其值必須符合定義的語(yǔ)法，并且必須是計(jì)算獨(dú)立（ ）值，否則整個(gè)定義將被忽略。什么是“計(jì)算獨(dú)立”？簡(jiǎn)單來(lái)說(shuō)，就是不再依賴(lài)于其他 CSS 屬性值。例如，1em 不符合條件，因?yàn)樗蕾?lài)于 font-size 的定義，var(--other-) 也不起作用，但像 1px 和 #F00 這樣的值是可以的。

@property --width {  syntax: "";  inherits: true;  initial-value: #f00; /* 不合定義語(yǔ)法的值，整個(gè)定義被忽略 */}@property --width {  syntax: "";  inherits: true;  initial-value: 1rem; /* 依賴(lài)根元素font-size，不符合條件，整個(gè)定義被忽略 */}

這里還要說(shuō)一下-value，由于它的存在，var()的替換和之前略有不同，我們先來(lái)舉一個(gè)上一篇文章中的例子：

:root { --text-color: 16px; }p { color: blue; }p { color: var(--text-color); }
div { color: blue; }div { color: 16px; }

在這個(gè)例子中，如前所述，由于計(jì)算值時(shí)出現(xiàn)錯(cuò)誤，定義未設(shè)置，因此 〈p〉 的顏色變?yōu)楹谏?。但是如果我們添加定義：

@property --text-color {  syntax: "";  inherits: true;  initial-value: #f00;}

這種情況下，在計(jì)算值的時(shí)候， --text-color: 16px; 并不符合聲明定義的語(yǔ)法，相當(dāng)于 --text-color: unset;，所以結(jié)果為 --text-color: #f00; （即初始值），所以〈p〉 會(huì)顯示為紅色，而不是黑色。但請(qǐng)注意，驗(yàn)證是在計(jì)算 div 值時(shí)發(fā)生的，而不是在解析 CSS 時(shí)發(fā)生的，所以如果我們將 --text-color 的定義改為如下形式，效果還是一樣：

:root {   --text-color: #0f0;   --text-color: 16px; /* 依舊是unset，而不是選擇讀取前一條，因?yàn)椴皇窃诮馕鰰r(shí)判斷的語(yǔ)法錯(cuò)誤 */}

由于種種原因，規(guī)范選擇在解析時(shí)不做語(yǔ)法檢查，所以即使計(jì)算時(shí)有語(yǔ)法檢查，也和常規(guī)的解析錯(cuò)誤不一致。如果這句話(huà)你還不太理解，回想一下前面錯(cuò)誤檢查的例子中，div文字是藍(lán)色的。

另外要注意，對(duì)于有初始值的全局變量，當(dāng)使用 var(--, ) 時(shí)，即使你手動(dòng)將 --:; 替換為 var(--, )，也不會(huì)讀取相應(yīng) -value 定義的初始值。

可以填寫(xiě)的類(lèi)型有很多，也支持復(fù)合類(lèi)型。前面的“”，或者“”和“>”等可以猜到的名字都是合法的值。詳細(xì)列表請(qǐng)看這里。注意引號(hào)是必須的，因?yàn)檫@個(gè)值需要類(lèi)型。

關(guān)于多個(gè)同名聲明的優(yōu)先級(jí)，如果CSS定義中存在同名的@聲明，則最后一個(gè)生效；但如果存在多個(gè)同名聲明，則其優(yōu)先級(jí)最高，并且該方法不允許重復(fù)聲明相同的變量名。

最后，目前沒(méi)有辦法取消注冊(cè)變量，但規(guī)范提到可能會(huì)稍后添加此功能。

好了，本文到此結(jié)束。感謝您花時(shí)間閱讀。希望您閱讀完本文后對(duì) CSS 自定義變量有更好的了解。