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

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

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

簡(jiǎn)介

CSS變量是在CSS文檔中定義的值，其目的是可重用性并減少CSS值中的冗余。下面是一個(gè)基本示例。

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次。想象一下，對(duì)于一個(gè)大型項(xiàng)目，不同的CSS文件，如果哪天被要求更改顏色。我們可以做的最好快的方式就是“查找并替換”。

使用CSS變量，可以更快解決這個(gè)問(wèn)題。定義變量名需要用--開(kāi)頭。首先，我們現(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變量是全局變量，因?yàn)槲覀冊(cè)?root元素中定義了它。但是，我們還可以將變量范圍限定到整個(gè)文檔中的某些元素。

命名變量

與編程語(yǔ)言命名變量相似，CSS 變量的有效命名應(yīng)包含字母數(shù)字字符，下劃線和破折號(hào)。另外，值得一提的是 CSS 變量區(qū)分大小寫(xiě)。

/* 合法命名 */  
: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 變量也有自己的作用域，這個(gè)概念類(lèi)似于其他編程語(yǔ)言。以 JS 為例:

:root {  
  --primary-color: #235ad1;  
}  
.section-title {  
  --primary-color: d12374;  
  color: var(--primary-color);  
}

變量element是全局的，因此可以在cool()函數(shù)內(nèi)部訪問(wèn)。但是，只能在cool()函數(shù)中訪問(wèn)變量otherElement。

:root {  
  --primary-color: #235ad1;  
}  
.section-title {  
  --primary-color: d12374;  
  color: var(--primary-color);  
}

變量--primary-color是全局變量，可以從文檔中的任何地方訪問(wèn)。變量--primary-color由于是在.section-title定義的，所以只能在.section-title中訪問(wèn)。

下面是一個(gè)比較直觀的示例圖片，可以加強(qiáng)我們的理解：

clipboard.png

變量--primary-color用于標(biāo)題顏色。我們想為作者名和最新文章標(biāo)題自定義顏色，因此我們需要將--primary-color覆蓋。這同樣適用于--unit變量。

/* 全局變量 */  
:root {  
  --primary-color: #235ad1;  
  --unit: 1rem;  
} 
 /* section-title 默認(rèn)的顏色和間距 */  
.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()有多個(gè)值。第二個(gè)#221只在變量--primary-color由于某種原因沒(méi)有定義的情況下有效。不僅如此，我們還可以將var()嵌套到另一個(gè)var()中。

.section-title {  
  color: var(--primary-color, var(--black, #222));  
}

在變量值依賴(lài)于某個(gè)動(dòng)作的情況下，該特性非常有用。當(dāng)變量沒(méi)有值時(shí)，為它提供一個(gè)回退很重要。

用例一：控制組件的大小

在設(shè)計(jì)系統(tǒng)中，按鈕通常有多種尺寸。通常，按鈕可以具有三種尺寸（Small, normal, large）。使用 CSS 變量來(lái)實(shí)現(xiàn)它并不容易：

.button {  --unit: 1rem;  padding: var(--unit);}.button--small {  --unit: 0.5rem;}.button--large {  --unit: 1.5rem;}

通過(guò)在按鈕組件作用域內(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%;  
}

這里何通過(guò)減小變量--primary-b使按鈕變暗。

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

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

在CSS中，沒(méi)有直接的方法來(lái)做到這一點(diǎn)，但是我們有一個(gè)簡(jiǎn)單的解決方法，使用CSS變量。

假設(shè)有一個(gè)圖標(biāo)，并且其寬度和高度應(yīng)該相等。我定義了變量--size，用于寬度和高度。

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

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

用例四：CSS Grid

CSS 變量對(duì)于網(wǎng)格非常有用。假設(shè)希望網(wǎng)格容器根據(jù)定義的首選寬度顯示其子項(xiàng)。與為每個(gè)變體創(chuàng)建類(lèi)并復(fù)制CSS相比，使用變量更容易做到這一點(diǎn)。

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)建一個(gè)完整的網(wǎng)格系統(tǒng)，該系統(tǒng)靈活，易于維護(hù)，并且可以在其他項(xiàng)目中使用。可以將相同的概念應(yīng)用于grid-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 漸變

以全值表示，例如，類(lèi)似漸變的東西。如果整個(gè)系統(tǒng)中使用漸變或背景，將其存儲(chǔ)到CSS變量中可能是一件好事。

:root {  
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);  
}  
.element {  
  background-image: var(--primary-gradient);  
}

或者我們可以存儲(chǔ)一個(gè)值。以角度為例:

.element {  
  --angle: 150deg;  
  background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);  
}  
.element.inverted {  
  --angle: -150deg;  
}

clipboard.png

用例六：Background Position

我們可以在 CSS 變量中包含多個(gè)值，這在需要根據(jù)特定上下文將元素放置在不同位置的情況下很有用。

clipboard.png

.element {  
  --angle: 150deg;  
  background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);  
}  
.element.inverted {  
  --angle: -150deg;  
}

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

現(xiàn)在，網(wǎng)站比以往任何時(shí)候都更需要深色和淺色模式。使用CSS變量，我們可以存儲(chǔ)它們的兩個(gè)版本，并根據(jù)用戶(hù)或系統(tǒng)偏好在它們之間切換。

clipboard.png

:root {  
  --text-color: #434343;  
  --border-color: #d2d2d2;  
  --main-bg-color: #fff;  
  --action-bg-color: #f9f7f7;  
}  
/* 添加到`<html>`元素的類(lèi)*/  
.dark-mode {  
  --text-color: #e9e9e9;  
  --border-color: #434343;  
  --main-bg-color: #434343;  
  --action-bg-color: #363636;  
}

圖片描述

用例八：設(shè)置默認(rèn)值

在某些情況下，您將需要使用JavaScript設(shè)置CSS變量。假設(shè)我們需要獲取可擴(kuò)展組件的高度。

變量--details-height-open為空，它將被添加到特定的HTML元素中。當(dāng)JavaScript由于某種原因失敗時(shí)，提供適當(dāng)?shù)哪J(rèn)值或后備值很重要。

.section.is-active {  
  max-height: var(--details-height-open, auto);  
}

auto值是 JS 失敗時(shí)的回退值，并且沒(méi)有定義CSS變量——details-height-open。

用例九：控制 wrapper 寬度

clipboard.png

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

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

用例十一：動(dòng)態(tài)網(wǎng)格項(xià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

用例十二：用戶(hù)頭像

clipboard.png

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

<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);  
}

用例十三：媒體查詢(xún)

組合CSS變量和媒體查詢(xún)對(duì)于調(diào)整整個(gè)網(wǎng)站中使用的變量非常有用。我能想到的最簡(jiǎn)單的示例是更改間距值。

:root {  
  --gutter: 8px;  
}  
@media (min-width: 800px) {  
  :root {  
    --gutter: 16px;  
  }  
}

使用--gutter變量的任何元素都將根據(jù)視口大小更改其間距，這是不是很棒嗎？

用例十四：繼承

是的，CSS變量確實(shí)繼承。如果父元素中定義了CSS變量，那么子元素將繼承相同的CSS變量。我們看下面的例子：

HTML

<div class="parent">  
  <p class="child"></p>  
</div>

css

.parent {  
  --size: 20px;  
}  
.child {  
  font-size: var(--size);  
}

.child元素可以訪問(wèn)變量--size，因?yàn)樗鼜母冈乩^承了它。很有趣,那它在實(shí)際的項(xiàng)目中有啥用呢？

clipboard.png

我們有一組以下需求的操作項(xiàng)

改變一個(gè)變量就可以改變所有項(xiàng)的大小
間距應(yīng)該是動(dòng)態(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);  
}

請(qǐng)注意，這里是如何將變量--size用于flexbox gap屬性的。這意味著間距可以是動(dòng)態(tài)的，并且取決于--size變量。

另一個(gè)有用的例子是使用CSS變量繼承來(lái)定制CSS動(dòng)畫(huà)：

@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 變量的工作方式

當(dāng)var()函數(shù)中的CSS變量無(wú)效時(shí)，瀏覽器將根據(jù)所使用的屬性用初始值或繼承值替換。

:root {  
  --main-color: 16px;  
}  
.section-title {  
  color: var(--main-color); 
 }

我使用16px是color屬性的值。這是完全錯(cuò)誤的。由于color屬性是繼承的，因此瀏覽器將執(zhí)行以下操作：

該屬性是否可繼承？
- 是的，繼承該值
- 否:設(shè)置為初始值
- 如果是，父節(jié)點(diǎn)是否擁有該屬性?
- 否:設(shè)置為初始值

下面解釋瀏覽器工作的流程圖。

clipboard.png

網(wǎng)址值

我們可能無(wú)法控制網(wǎng)頁(yè)中的所有資源，其中一些必須在線托管。在這種情況下，您可以將鏈接的URL值存儲(chǔ)在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本身，因此無(wú)效。當(dāng)瀏覽器計(jì)算出該值時(shí)，該值將不再有效，并且將無(wú)法按預(yù)期運(yùn)行。

存儲(chǔ)多個(gè)值

CSS 變量也可以表示多個(gè)值，看下面的例子：

clipboard.png

:root {  
  --main-color: 35, 90, 209;  
}  
.section-title {  
  color: rgba(var(--main-color), 0.75);  
}

在示例中，我們有一個(gè)rgba()函數(shù)，并且RGB值存儲(chǔ)在CSS變量中，以逗號(hào)分隔。如果我們想根據(jù)元素調(diào)整alpha值，這樣做可以提供靈活性。唯一的缺點(diǎn)是無(wú)法使用DevTools顏色選擇器來(lái)調(diào)整rgba值。

另一個(gè)例子是將它與background屬性一起使用。

:root {  
  --bg: linear-gradient(#000, #000) center/50px;  
}  
.section {  
  background: var(--bg);  
}  
.section--unique {  
  background: var(--bg) no-repeat;  
}

@keyframes規(guī)則中的動(dòng)畫(huà)變量

如果你閱讀過(guò)CSS變量規(guī)范，則可能會(huì)讀到“動(dòng)畫(huà)污染”一詞。這個(gè)想法是，在@keyframes規(guī)則中使用CSS變量時(shí)，無(wú)法對(duì)其進(jìn)行動(dòng)畫(huà)處理。

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;  
  }  
}

動(dòng)畫(huà)無(wú)法順利進(jìn)行。它將僅對(duì)值 (0, 50px, 100px)進(jìn)行動(dòng)畫(huà)處理。根據(jù)CSS規(guī)范：

@keyframes規(guī)則中使用的任何自定義屬性都會(huì)受到動(dòng)畫(huà)污染，這將影響通過(guò)動(dòng)畫(huà)屬性中的var()函數(shù)引用它時(shí)如何處理它。

如果我們希望上述動(dòng)畫(huà)能夠正常工作，則應(yīng)采用老式的方法。這意味著，我們需要用要設(shè)置動(dòng)畫(huà)的實(shí)際CSS屬性替換變量。

@keyframes moveBox {  
  0% {  
    transform: translateX(0);  
  }  
  50% {  
    transform: translateX(50px);  
  }  
  100% {  
    transform: translateX(100px);  
  }  
}

計(jì)算

你可能不知道可以使用 CSS 變量進(jìn)行計(jì)算。考慮下面示例：

.c-avatar {  
  display: inline-block;  
  width: calc(var(--size, 1) * 30px);  
  height: calc(var(--size, 1) * 30px);  
}

.c-avatar 大小會(huì)有不同的變化。我將默認(rèn)值設(shè)置為1，所以默認(rèn)大小為(30px * 30px)。注意不同的類(lèi)變化以及更改--size值如何導(dǎo)致化身的大小變化。

.c-avatar--small {  
  --size: 2; 
 }  
.c-avatar--medium {  
  --size: 3;  
}  
.c-avatar--large {  
  --size: 4;  
}

Devtools和CSS變量

我們可以在瀏覽器DevTools中使用一些有用的技巧，這樣就能更輕松地使用CSS變量。

看到顏色

使用CSS變量時(shí)，看到顏色或背景值的視覺(jué)指示器是否有用？Chrome和Edge證明了這一點(diǎn)。

clipboard.png

計(jì)算值

要查看CSS變量的計(jì)算值，只要將鼠標(biāo)懸停或單擊即可。

clipboard.png

禁用CSS變量

當(dāng)我們需要從使用CSS變量的所有元素中禁用CSS變量時(shí)，可以通過(guò)從定義它的元素中取消選中它來(lái)實(shí)現(xiàn)。參見(jiàn)下圖：

clipboard.png

本文介紹了 CSS 變量的很多內(nèi)容，希望能對(duì)你有些幫助，

責(zé)任編輯：龐桂玉來(lái)源：前端大全

CSS 前端代碼

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

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

簡(jiǎn)介

命名變量

作用域

回退方案

用例一：控制組件的大小

用例二：CSS 變量和 HSL 顏色

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

用例四：CSS Grid

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

用例六：Background Position

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

用例八：設(shè)置默認(rèn)值

用例九：控制 wrapper 寬度

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

CSS

用例十二：用戶(hù)頭像

用例十三：媒體查詢(xún)

用例十四：繼承

HTML

css

HTML

CSS

CSS 變量的工作方式

網(wǎng)址值

存儲(chǔ)多個(gè)值

@keyframes規(guī)則中的動(dòng)畫(huà)變量

html

CSS

計(jì)算

Devtools和CSS變量

看到顏色

計(jì)算值

禁用CSS變量