CSS 變量由淺入深，提升效率必備知識！

作者：佚名 2021-06-21 11:05:30

CSS變量（又名自定義屬性）已在Web瀏覽器中支持了近四年。我一般也會根據(jù)項目情況使用它們。它們非常有用且易于使用，但是前端開發(fā)人員通常可能會誤用或誤解它們。

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ù)內(nèi)部訪問。但是，只能在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;}

通過在按鈕組件作用域內(nèi)更改變量--unit，我們創(chuàng)建了按鈕的不同變體。

用例二：CSS 變量和 HSL 顏色

HSL代表色調(diào)，飽和度，亮度。色相的值決定了顏色，飽和度和亮度值可以控制顏色的深淺。

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使按鈕變暗。

用例三：比例調(diào)整

如果您使用過Photoshop，Sketch，F(xiàn)igma或Adobe XD之類的設計程序，那么我們會想在調(diào)整元素大小的同時按住Shift鍵以避免扭曲它。

在CSS中，沒有直接的方法來做到這一點，但是我們有一個簡單的解決方法，使用CSS變量。

假設有一個圖標，并且其寬度和高度應該相等。我定義了變量--size，用于寬度和高度。

.icon {  
  --size: 22px;  
  width: var(--size);  
  height: var(--size);  
}

現(xiàn)在，您只需更改--size變量的值即可模擬Shift調(diào)整大小的效果。

用例四：CSS Grid

CSS 變量對于網(wǎng)格非常有用。假設希望網(wǎng)格容器根據(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)建一個完整的網(wǎ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)在，網(wǎng)站比以往任何時候都更需要深色和淺色模式。使用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

網(wǎng)站wrapper 可以有多種變化。有時候是需要一個小包裝一個頁面，一個大包裝另一個頁面。在這種情況下，合并CSS變量可能是有用的。

.wrapper {  
  --size: 1140px;  
  max-width: var(--size);  
}  
.wrapper--small {  
  --size: 800px;  
}

用例十一：動態(tài)網(wǎng)格項目

我們可以在style屬性中添加--item-width變量，僅此而已。例如，這種方法可以幫助建立網(wǎng)格原型。

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

另一個有用的用例是大小調(diào)整元素。假設我們需要四種不同大小的用戶頭像，并且只能使用一個變量來控制其大小。

<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變量和媒體查詢對于調(diào)整整個網(wǎng)站中使用的變量非常有用。我能想到的最簡單的示例是更改間距值。

: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

網(wǎng)址值

我們可能無法控制網(wǎng)頁中的所有資源，其中一些必須在線托管。在這種情況下，您可以將鏈接的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ù)元素調(diào)整alpha值，這樣做可以提供靈活性。唯一的缺點是無法使用DevTools顏色選擇器來調(diào)整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 變量的很多內(nèi)容，希望能對你有些幫助，

責任編輯：龐桂玉來源：前端大全

CSS 前端代碼

自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS 變量由淺入深，提升效率必備知識！

簡介

命名變量

作用域

回退方案

用例一：控制組件的大小

用例二：CSS 變量和 HSL 顏色

用例三：比例調(diào)整

用例四：CSS Grid

用例五：全值聲明，CSS 漸變

用例六：Background Position

用例七：在明暗模式之間切換

用例八：設置默認值

用例九：控制 wrapper 寬度

用例十一：動態(tài)網(wǎng)格項目

CSS

用例十二：用戶頭像

用例十三：媒體查詢

用例十四：繼承

HTML

css

HTML

CSS

CSS 變量的工作方式

網(wǎng)址值

存儲多個值

@keyframes規(guī)則中的動畫變量

html

CSS

計算

Devtools和CSS變量

看到顏色

計算值

禁用CSS變量

CSS 變量由淺入深，提升效率必備知識！