溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何聲明第一個css變量，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
剛開始的“css變量”，經(jīng)擴(kuò)展之后，稱為“css自定義屬性”。當(dāng)各種預(yù)處理器滿天飛的時候，css變量已經(jīng)開始漸漸普及在特定的應(yīng)用場景，css變量確實發(fā)揮了很大的作用。
此外，與一些 CSS 預(yù)處理器不同的是，CSS 變量實際上是 DOM 的一部分，這對于開發(fā)有極大的好處。
為什么學(xué)習(xí) CSS 變量？
關(guān)于為什么在 CSS 中使用變量有很多理由，其中最主要的一點就是它減少了樣式代碼的重復(fù)。
以這段代碼為例，像我們下面這樣為 #ffeead 顏色創(chuàng)建一個變量會比機(jī)械地重復(fù)它好得多：
這樣一來你的代碼不僅僅是變得更加可讀，而且也為你將來想要做出改變提供了更多的靈活性。
雖然這一功能 SASS 和 LESS 早在幾年前就實現(xiàn)了，但 CSS 變量還是有很多亮點：
它不需要經(jīng)過任何轉(zhuǎn)譯步驟，因為它是瀏覽器原生支持的。所以你不需要像使用 SASS 和 LESS 那樣，你不需要任何設(shè)置就能直接書寫這樣的代碼。
它是 DOM 的一部分，這給我們帶來了極大的便利，這一點我后面會在文章中進(jìn)行闡述。
那么我們開始吧！
聲明你的第一個 CSS 變量
在聲明一個變量之前，首先你要確定這個變量的作用域在哪，如果你想讓它在全局生效，只需在:root偽類中定義它即可。它會匹配文檔的根元素（通常是<html>標(biāo)簽）。
由于變量是可繼承的，所以你的整個 HTML 結(jié)構(gòu)樹都能使用這個變量，因為所有的 DOM 元素都是 <html> 節(jié)點的后代。
:root {
--main-color: #ff6f69;
}你可以像設(shè)置任何CSS屬性一樣聲明一個變量。 但不同的是，變量必須以兩個破折號開頭。
而要獲取到這個變量的值，需要使用 var() 函數(shù)，并將變量的名稱作為參數(shù)傳入。
#title {
color: var(--main-color);
}你的標(biāo)題將被賦值 #ff6f69 的顏色。
聲明一個局部變量
你也可以創(chuàng)建局部變量，局部變量只能夠被聲明的元素及其子元素訪問。一般當(dāng)你想要僅在頁面的某些特定部分使用這個變量時聲明。
例如，假設(shè)你的頁面中有個警告框，你想給它賦值一個特殊的顏色，而這個顏色在頁面的其他部分又沒有應(yīng)用到。那么在這種情況下，就應(yīng)該避免創(chuàng)建全局變量，使用局部變量就更為合理。
.alert {
--alert-color: #ff6f69;
}現(xiàn)在在其子元素中就能夠使用這個變量了：
.alert p {
color: var(--alert-color);
border: 1px solid var(--alert-color);
}如果你嘗試在頁面其他位置使用變量 alert-color，是無效的，瀏覽器會忽略那一行 CSS 代碼。
通過 CSS 變量更容易地實現(xiàn)響應(yīng)式布局
CSS 變量的一大優(yōu)勢是它們可以訪問 DOM ，這是 LESS 或 SASS 的變量所做不到的，因為它們會被編譯為常規(guī)的 CSS 。
這意味著你可以根據(jù)屏幕的寬度來改變變量的值：
:root {
--main-font-size: 16px;
}
media all and (max-width: 600px) {
:root {
--main-font-size: 12px;
}
}僅僅通過這簡單的四行代碼，你就能改變你的應(yīng)用在小屏幕上所顯示的主字體大小，騷操作？
JavaScript 如何訪問 CSS 變量
與 DOM 相結(jié)合的另一大優(yōu)勢是你可以通過 JavaScript訪問到變量，甚至可以更新變量的值，例如基于交互的樣式改變。如果你想讓用戶能夠更改你的網(wǎng)站的樣式（如調(diào)整字體大?。?，這將會是一個非常完美的解決方案。
讓我們繼續(xù)剛剛的例子，在 JavaScript 中獲取 CSS 變量的值只需要三行代碼。
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); --> '#ffeead'要更新 CSS 變量，只需在已聲明變量的元素上調(diào)用 setProperty 方法，并將變量名稱作為第一個參數(shù)，將新值作為第二個參數(shù)傳入。
root.style.setProperty('--main-color', '#88d8b0')main-color 屬性會改變你的頁面的整體外觀，這讓用戶自定義網(wǎng)站的主題色變得極其簡單。
瀏覽器支持
目前，全球網(wǎng)站流量的 77％ 支持CSS變量，而美國已經(jīng)接近90％。我們已經(jīng)在 Scrimba.com 上使用 CSS 變量，因為我們的客戶大多使用現(xiàn)代瀏覽器。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何聲明第一個css變量”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼