CSS 變量由淺入深，提升效率必備知識！
CSS變量（又名自定義屬性）已在Web瀏覽器中支持了近四年。我一般也會根據(jù)項目情況使用它們。它們非常有用且易于使用，但是前端開發(fā)人員通常可能會誤用或誤解它們。
簡介
CSS變量是在CSS文檔中定義的值，其目的是可重用性并減少CSS值中的冗余。下面是一個基本示例。
clipboard.png
- .section {
- border: 2px solid #235ad1;
- }
- .section-title {
- color: #235ad1;
- }
- .section-title::before {
- content: "";
- display: inline-block;
- width: 20px;
- height: 20px;
- background-color: #235ad1;
- }
在此代碼段中，#235ad1使用了3次。想象一下，對于一個大型項目，不同的CSS文件，如果哪天被要求更改顏色。我們可以做的最好快的方式就是“查找并替換”。
使用CSS變量，可以更快解決這個問題。定義變量名需要用--開頭。首先，我們現(xiàn)在將在:root或<html>元素中定義變量。
- :root {
- --color-primary: #235ad1;
- }
- .section {
- border: 2px solid var(--color-primary);
- }
- .section-title {
- color: var(--color-primary);
- }
- .section-title::before {
- /* Other styles */
- background-color: var(--color-primary);
- }
是不是比前面的干凈得多？--color-primary變量是全局變量，因為我們在:root元素中定義了它。但是，我們還可以將變量范圍限定到整個文檔中的某些元素。
命名變量
與編程語言命名變量相似，CSS 變量的有效命名應包含字母數(shù)字字符，下劃線和破折號。另外，值得一提的是 CSS 變量區(qū)分大小寫。
- /* 合法命名 */
- :root {
- --primary-color: #222;
- --_primary-color: #222;
- --12-primary-color: #222;
- --primay-color-12: #222;
- }
- /* 非法命名 */
- :root {
- --primary color: #222; /* Spacings are not allowed */
- --primary$%#%$#
- }
作用域
CSS 變量也有自己的作用域，這個概念類似于其他編程語言。以 JS 為例:
- :root {
- --primary-color: #235ad1;
- }
- .section-title {
- --primary-color: d12374;
- color: var(--primary-color);
- }
變量element是全局的，因此可以在cool()函數(shù)內部訪問。但是，只能在cool()函數(shù)中訪問變量otherElement。
- :root {
- --primary-color: #235ad1;
- }
- .section-title {
- --primary-color: d12374;
- color: var(--primary-color);
- }
變量--primary-color是全局變量，可以從文檔中的任何地方訪問。變量--primary-color由于是在.section-title定義的，所以只能在.section-title中訪問。
下面是一個比較直觀的示例圖片，可以加強我們的理解：
clipboard.png
變量--primary-color用于標題顏色。我們想為作者名和最新文章標題自定義顏色，因此我們需要將--primary-color覆蓋。這同樣適用于--unit變量。
- /* 全局變量 */
- :root {
- --primary-color: #235ad1;
- --unit: 1rem;
- }
- /* section-title 默認的顏色和間距 */
- .section-title {
- color: var(--primary-color);
- margin-bottom: var(--unit);
- }
- /* 覆蓋 section-title 樣式 */
- .featured-authors .section-title {
- --primary-color: #d16823;
- }
- .latest-articles .section-title {
- --primary-color: #d12374;
- --unit: 2rem;
- }
回退方案
這里的回退不是不支持 CSS 變量的回退，而是 CSS 變量可以支持回退方案?？紤]以下示例：
- .section-title {
- color: var(--primary-color, #222);
- }
注意，var()有多個值。第二個#221只在變量--primary-color由于某種原因沒有定義的情況下有效。不僅如此，我們還可以將var()嵌套到另一個var()中。
- .section-title {
- color: var(--primary-color, var(--black, #222));
- }
在變量值依賴于某個動作的情況下，該特性非常有用。當變量沒有值時，為它提供一個回退很重要。
用例一：控制組件的大小
在設計系統(tǒng)中，按鈕通常有多種尺寸。通常，按鈕可以具有三種尺寸（Small, normal, large）。使用 CSS 變量來實現(xiàn)它并不容易：
- .button { --unit: 1rem; padding: var(--unit);}.button--small { --unit: 0.5rem;}.button--large { --unit: 1.5rem;}
通過在按鈕組件作用域內更改變量--unit，我們創(chuàng)建了按鈕的不同變體。
用例二：CSS 變量和 HSL 顏色
HSL代表色調，飽和度，亮度。色相的值決定了顏色，飽和度和亮度值可以控制顏色的深淺。
clipboard.png
- :root {
- --primary-h: 221;
- --primary-s: 71%;
- --primary-b: 48%;
- }
- .button {
- background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
- transition: background-color 0.3s ease-out;
- }
- /* 使背景更暗 */
- .button:hover {
- --primary-b: 33%;
- }
這里何通過減小變量--primary-b使按鈕變暗。
用例三：比例調整
如果您使用過Photoshop，Sketch，F(xiàn)igma或Adobe XD之類的設計程序，那么我們會想在調整元素大小的同時按住Shift鍵以避免扭曲它。
在CSS中，沒有直接的方法來做到這一點，但是我們有一個簡單的解決方法，使用CSS變量。
假設有一個圖標，并且其寬度和高度應該相等。我定義了變量--size，用于寬度和高度。
- .icon {
- --size: 22px;
- width: var(--size);
- height: var(--size);
- }
現(xiàn)在，您只需更改--size變量的值即可模擬Shift調整大小的效果。
用例四：CSS Grid
CSS 變量對于網格非常有用。假設希望網格容器根據(jù)定義的首選寬度顯示其子項。與為每個變體創(chuàng)建類并復制CSS相比，使用變量更容易做到這一點。
clipboard.png
- .wrapper {
- --item-width: 300px;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
- grid-gap: 1rem;
- }
- .wrapper-2 {
- --item-width: 500px;
這樣，我們可以創(chuàng)建一個完整的網格系統(tǒng)，該系統(tǒng)靈活，易于維護，并且可以在其他項目中使用?？梢詫⑾嗤母拍顟糜趃rid-gap屬性。
- wrapper {
- --item-width: 300px;
- --gap: 0;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
- }
- .wrapper.gap-1 {
- --gap: 16px;
- }
用例五：全值聲明，CSS 漸變
以全值表示，例如，類似漸變的東西。如果整個系統(tǒng)中使用漸變或背景，將其存儲到CSS變量中可能是一件好事。
- :root {
- --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
- }
- .element {
- background-image: var(--primary-gradient);
- }
或者我們可以存儲一個值。以角度為例:
- .element {
- --angle: 150deg;
- background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
- }
- .element.inverted {
- --angle: -150deg;
- }
clipboard.png
用例六：Background Position
我們可以在 CSS 變量中包含多個值，這在需要根據(jù)特定上下文將元素放置在不同位置的情況下很有用。
clipboard.png
- .element {
- --angle: 150deg;
- background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
- }
- .element.inverted {
- --angle: -150deg;
- }
用例七：在明暗模式之間切換
現(xiàn)在，網站比以往任何時候都更需要深色和淺色模式。使用CSS變量，我們可以存儲它們的兩個版本，并根據(jù)用戶或系統(tǒng)偏好在它們之間切換。
clipboard.png
- :root {
- --text-color: #434343;
- --border-color: #d2d2d2;
- --main-bg-color: #fff;
- --action-bg-color: #f9f7f7;
- }
- /* 添加到`<html>`元素的類*/
- .dark-mode {
- --text-color: #e9e9e9;
- --border-color: #434343;
- --main-bg-color: #434343;
- --action-bg-color: #363636;
- }
圖片描述
用例八：設置默認值
在某些情況下，您將需要使用JavaScript設置CSS變量。假設我們需要獲取可擴展組件的高度。
變量--details-height-open為空，它將被添加到特定的HTML元素中。當JavaScript由于某種原因失敗時，提供適當?shù)哪J值或后備值很重要。
- .section.is-active {
- max-height: var(--details-height-open, auto);
- }
auto值是 JS 失敗時的回退值，并且沒有定義CSS變量——details-height-open。
用例九：控制 wrapper 寬度
clipboard.png
網站wrapper 可以有多種變化。有時候是需要一個小包裝一個頁面，一個大包裝另一個頁面。在這種情況下，合并CSS變量可能是有用的。
- .wrapper {
- --size: 1140px;
- max-width: var(--size);
- }
- .wrapper--small {
- --size: 800px;
- }
用例十一：動態(tài)網格項目
我們可以在style屬性中添加--item-width變量，僅此而已。例如，這種方法可以幫助建立網格原型。
- HTML
- <div class="wrapper" style="--item-width: 250px;">
- <div></div>
- <div></div>
- <div></div>
- </div>
CSS
- .wrapper {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
- grid-gap: 1rem;
- }
事例：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4
用例十二：用戶頭像
clipboard.png
另一個有用的用例是大小調整元素。假設我們需要四種不同大小的用戶頭像，并且只能使用一個變量來控制其大小。
- <img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
- <img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
- <img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
- <img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />
- .c-avatar {
- display: inline-block;
- width: calc(var(--size, 1) * 30px);
- height: calc(var(--size, 1) * 30px);
- }
用例十三：媒體查詢
組合CSS變量和媒體查詢對于調整整個網站中使用的變量非常有用。我能想到的最簡單的示例是更改間距值。
- :root {
- --gutter: 8px;
- }
- @media (min-width: 800px) {
- :root {
- --gutter: 16px;
- }
- }
使用--gutter變量的任何元素都將根據(jù)視口大小更改其間距，這是不是很棒嗎？
用例十四：繼承
是的，CSS變量確實繼承。如果父元素中定義了CSS變量，那么子元素將繼承相同的CSS變量。我們看下面的例子：
HTML
- <div class="parent">
- <p class="child"></p>
- </div>
css
- .parent {
- --size: 20px;
- }
- .child {
- font-size: var(--size);
- }
.child元素可以訪問變量--size，因為它從父元素繼承了它。很有趣,那它在實際的項目中有啥用呢？
clipboard.png
我們有一組以下需求的操作項
- 改變一個變量就可以改變所有項的大小
- 間距應該是動態(tài)的
HTML
- <div class="actions">
- <div class="actions__item"></div>
- <div class="actions__item"></div>
- <div class="actions__item"></div>
- </div>
CSS
- .actions {
- --size: 50px;
- display: flex;
- gap: calc(var(--size) / 5);
- }
- .actions--m {
- --size: 70px;
- }
- .actions__item {
- width: var(--size);
- height: var(--size);
- }
請注意，這里是如何將變量--size用于flexbox gap屬性的。這意味著間距可以是動態(tài)的，并且取決于--size變量。
另一個有用的例子是使用CSS變量繼承來定制CSS動畫：
- @keyframes breath {
- from {
- transform: scale(var(--scaleStart));
- }
- to {
- transform: scale(var(--scaleEnd));
- }
- }
- .walk {
- --scaleStart: 0.3;
- --scaleEnd: 1.7;
- animation: breath 2s alternate;
- }
- .run {
- --scaleStart: 0.8;
- --scaleEnd: 1.2;
- animation: breath 0.5s alternate;
- }
這樣，我們就不需要定義@keyframes兩次，它將繼承.walk和.run元素的定制CSS 變量。
CSS 變量的工作方式
當var()函數(shù)中的CSS變量無效時，瀏覽器將根據(jù)所使用的屬性用初始值或繼承值替換。
- :root {
- --main-color: 16px;
- }
- .section-title {
- color: var(--main-color);
- }
我使用16px是color屬性的值。這是完全錯誤的。由于color屬性是繼承的，因此瀏覽器將執(zhí)行以下操作：
- 該屬性是否可繼承？
- 是的，繼承該值
- 否:設置為初始值
- 如果是，父節(jié)點是否擁有該屬性?
- 否:設置為初始值
下面解釋瀏覽器工作的流程圖。
clipboard.png
網址值
我們可能無法控制網頁中的所有資源，其中一些必須在線托管。在這種情況下，您可以將鏈接的URL值存儲在CSS變量中。
- :root {
- --main-bg: url("https://example.com/cool-image.jpg");
- }
- .section {
- background: var(--main-bg);
- }
但是，能想知道是否可以使用url()插入 CSS 變量?？紤]以下
- :root {
- --main-bg: "https://example.com/cool-image.jpg";
- }
- .section {
- background: url(var(--main-bg));
- }
由于var(--main-bg)被視為url本身，因此無效。當瀏覽器計算出該值時，該值將不再有效，并且將無法按預期運行。
存儲多個值
CSS 變量也可以表示多個值，看下面的例子：
clipboard.png
- :root {
- --main-color: 35, 90, 209;
- }
- .section-title {
- color: rgba(var(--main-color), 0.75);
- }
在示例中，我們有一個rgba()函數(shù)，并且RGB值存儲在CSS變量中，以逗號分隔。如果我們想根據(jù)元素調整alpha值，這樣做可以提供靈活性。唯一的缺點是無法使用DevTools顏色選擇器來調整rgba值。
另一個例子是將它與background屬性一起使用。
- :root {
- --bg: linear-gradient(#000, #000) center/50px;
- }
- .section {
- background: var(--bg);
- }
- .section--unique {
- background: var(--bg) no-repeat;
- }
@keyframes規(guī)則中的動畫變量
如果你閱讀過CSS變量規(guī)范，則可能會讀到“動畫污染”一詞。這個想法是，在@keyframes規(guī)則中使用CSS變量時，無法對其進行動畫處理。
html
- <div class="box"></div>
CSS
- .box {
- width: 50px;
- height: 50px;
- background: #222;
- --offset: 0;
- transform: translateX(var(--offset));
- animation: moveBox 1s infinite alternate;
- }
- @keyframes moveBox {
- 0% {
- --offset: 0;
- }
- 50% {
- --offset: 50px;
- }
- 100% {
- --offset: 100px;
- }
- }
動畫無法順利進行。它將僅對值 (0, 50px, 100px)進行動畫處理。根據(jù)CSS規(guī)范：
@keyframes規(guī)則中使用的任何自定義屬性都會受到動畫污染，這將影響通過動畫屬性中的var()函數(shù)引用它時如何處理它。
如果我們希望上述動畫能夠正常工作，則應采用老式的方法。這意味著，我們需要用要設置動畫的實際CSS屬性替換變量。
- @keyframes moveBox {
- 0% {
- transform: translateX(0);
- }
- 50% {
- transform: translateX(50px);
- }
- 100% {
- transform: translateX(100px);
- }
- }
計算
你可能不知道可以使用 CSS 變量進行計算?？紤]下面示例：
- .c-avatar {
- display: inline-block;
- width: calc(var(--size, 1) * 30px);
- height: calc(var(--size, 1) * 30px);
- }
.c-avatar 大小會有不同的變化。我將默認值設置為1，所以默認大小為(30px * 30px)。注意不同的類變化以及更改--size值如何導致化身的大小變化。
- .c-avatar--small {
- --size: 2;
- }
- .c-avatar--medium {
- --size: 3;
- }
- .c-avatar--large {
- --size: 4;
- }
Devtools和CSS變量
我們可以在瀏覽器DevTools中使用一些有用的技巧，這樣就能更輕松地使用CSS變量。
看到顏色
使用CSS變量時，看到顏色或背景值的視覺指示器是否有用？Chrome和Edge證明了這一點。
clipboard.png
計算值
要查看CSS變量的計算值，只要將鼠標懸停或單擊即可。
clipboard.png
禁用CSS變量
當我們需要從使用CSS變量的所有元素中禁用CSS變量時，可以通過從定義它的元素中取消選中它來實現(xiàn)。參見下圖：
clipboard.png
本文介紹了 CSS 變量的很多內容，希望能對你有些幫助，
