溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹關(guān)于CSS變量的知識(shí)點(diǎn)有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。
CSS變量（又名自定義屬性）已在Web瀏覽器中支持了近四年。 我一般也會(huì)根據(jù)項(xiàng)目情況使用它們。 它們非常有用且易于使用，但是前端開發(fā)人員通?？赡軙?huì)誤用或誤解它們。
CSS變量是在CSS文檔中定義的值，其目的是可重用性并減少CSS值中的冗余。 下面是一個(gè)基本示例。
.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è)問題。 定義變量名需要用--開頭。 首先，我們現(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è)?code>:root元素中定義了它。 但是，我們還可以將變量范圍限定到整個(gè)文檔中的某些元素。
與編程語言命名變量相似，CSS 變量的有效命名應(yīng)包含字母數(shù)字字符，下劃線和破折號(hào)。 另外，值得一提的是 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 變量也有自己的作用域，這個(gè)概念類似于其他編程語言。 以 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中訪問。
下面是一個(gè)比較直觀的示例圖片，可以加強(qiáng)我們的理解：
變量--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由于某種原因沒有定義的情況下有效。不僅如此，我們還可以將var()嵌套到另一個(gè)var()中。
.section-title {
color: var(--primary-color, var(--black, #222));
}在變量值依賴于某個(gè)動(dòng)作的情況下，該特性非常有用。當(dāng)變量沒有值時(shí)，為它提供一個(gè)回退很重要。
在設(shè)計(jì)系統(tǒng)中，按鈕通常有多種尺寸。 通常，按鈕可以具有三種尺寸（Small, normal, large）。 使用 CSS 變量來實(shí)現(xiàn)它并不容易：
.button {
--unit: 1rem;
padding: var(--unit);
}
.button--small {
--unit: 0.5rem;
}
.button--large {
--unit: 1.5rem;
}通過在按鈕組件作用域內(nèi)更改變量--unit，我們創(chuàng)建了按鈕的不同變體。
HSL代表色調(diào)，飽和度，亮度。色相的值決定了顏色，飽和度和亮度值可以控制顏色的深淺。
: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，Figma或Adobe XD之類的設(shè)計(jì)程序，那么我們會(huì)想在調(diào)整元素大小的同時(shí)按住Shift鍵以避免扭曲它。
在CSS中，沒有直接的方法來做到這一點(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 變量對(duì)于網(wǎng)格非常有用。 假設(shè)希望網(wǎng)格容器根據(jù)定義的首選寬度顯示其子項(xiàng)。 與為每個(gè)變體創(chuàng)建類并復(fù)制CSS相比，使用變量更容易做到這一點(diǎn)。
.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;
}
以全值表示，例如，類似漸變的東西。 如果整個(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;
}
我們可以在 CSS 變量中包含多個(gè)值，這在需要根據(jù)特定上下文將元素放置在不同位置的情況下很有用。
.table {
--size: 50px;
--pos: left center;
background: #ccc linear-gradient(#000, #000) no-repeat;
background-size: var(--size) var(--size);
background-position: var(--pos);
}現(xiàn)在，網(wǎng)站比以往任何時(shí)候都更需要深色和淺色模式。 使用CSS變量，我們可以存儲(chǔ)它們的兩個(gè)版本，并根據(jù)用戶或系統(tǒng)偏好在它們之間切換。
: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設(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í)的回退值，并且沒有定義CSS變量——details-height-open。
網(wǎng)站wrapper 可以有多種變化。有時(shí)候是需要一個(gè)小包裝一個(gè)頁面，一個(gè)大包裝另一個(gè)頁面。在這種情況下，合并CSS變量可能是有用的。
.wrapper {
--size: 1140px;
max-width: var(--size);
}
.wrapper--small {
--size: 800px;
}我們可以在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
另一個(gè)有用的用例是大小調(diào)整元素。 假設(shè)我們需要四種不同大小的用戶頭像，并且只能使用一個(gè)變量來控制其大小。
<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變量和媒體查詢對(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元素可以訪問變量--size，因?yàn)樗鼜母冈乩^承了它。很有趣,那它在實(shí)際的項(xiàng)目中有啥用呢？
我們有一組以下需求的操作項(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變量繼承來定制CSS動(dòng)畫：
@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 變量。
當(dāng)var()函數(shù)中的CSS變量無效時(shí)，瀏覽器將根據(jù)所使用的屬性用初始值或繼承值替換。
:root {
--main-color: 16px;
}
.section-title {
color: var(--main-color);
}我使用16px是color屬性的值。 這是完全錯(cuò)誤的。 由于color屬性是繼承的，因此瀏覽器將執(zhí)行以下操作：
該屬性是否可繼承？
是的，繼承該值
否:設(shè)置為初始值
如果是，父節(jié)點(diǎn)是否擁有該屬性?
否:設(shè)置為初始值
下面解釋瀏覽器工作的流程圖。
我們可能無法控制網(wǎng)頁中的所有資源，其中一些必須在線托管。 在這種情況下，您可以將鏈接的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本身，因此無效。 當(dāng)瀏覽器計(jì)算出該值時(shí)，該值將不再有效，并且將無法按預(yù)期運(yùn)行。
CSS 變量也可以表示多個(gè)值，看下面的例子：
: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)是無法使用DevTools顏色選擇器來調(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)畫變量如果你閱讀過CSS變量規(guī)范，則可能會(huì)讀到“動(dòng)畫污染”一詞。 這個(gè)想法是，在@keyframes規(guī)則中使用CSS變量時(shí)，無法對(duì)其進(jìn)行動(dòng)畫處理。
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)畫無法順利進(jìn)行。 它將僅對(duì)值 (0, 50px, 100px)進(jìn)行動(dòng)畫處理。 根據(jù)CSS規(guī)范：
@keyframes規(guī)則中使用的任何自定義屬性都會(huì)受到動(dòng)畫污染，這將影響通過動(dòng)畫屬性中的var()函數(shù)引用它時(shí)如何處理它。
如果我們希望上述動(dòng)畫能夠正常工作，則應(yīng)采用老式的方法。 這意味著，我們需要用要設(shè)置動(dòng)畫的實(shí)際CSS屬性替換變量。
@keyframes moveBox {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(100px);
}
}你可能不知道可以使用 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)。 注意不同的類變化以及更改--size值如何導(dǎo)致化身的大小變化。
.c-avatar--small {
--size: 2;
}
.c-avatar--medium {
--size: 3;
}
.c-avatar--large {
--size: 4;
}我們可以在瀏覽器DevTools中使用一些有用的技巧，這樣就能更輕松地使用CSS變量。
使用CSS變量時(shí)，看到顏色或背景值的視覺指示器是否有用？ Chrome和Edge證明了這一點(diǎn)。
要查看CSS變量的計(jì)算值，只要將鼠標(biāo)懸?；騿螕艏纯伞?/p>
當(dāng)我們需要從使用CSS變量的所有元素中禁用CSS變量時(shí)，可以通過從定義它的元素中取消選中它來實(shí)現(xiàn)。 參見下圖：
以上是“關(guān)于CSS變量的知識(shí)點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼