整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
復(fù)雜的網(wǎng)站都會(huì)有大量的CSS代碼，通常也會(huì)有許多重復(fù)的值。
舉個(gè)例子，同樣一個(gè)顏色值可能在成千上百個(gè)地方被使用到，如果這個(gè)值發(fā)生了變化，需要全局搜索并且一個(gè)一個(gè)替換，效率不高且容易出錯(cuò)。
自定義屬性在某個(gè)地方存儲(chǔ)一個(gè)值，然后在其他許多地方引用它。另一個(gè)好處是語(yǔ)義化的標(biāo)識(shí)。比如，--main-text-color 會(huì)比 #00ff00 更易理解，尤其是這個(gè)顏色值在其他上下文中也被使用到。
自定義屬性（有時(shí)候也被稱作CSS變量或者級(jí)聯(lián)變量）是由CSS作者定義的，它包含的值可以在整個(gè)文檔中重復(fù)使用。
由自定義屬性標(biāo)記設(shè)定值（比如： --main-color: black;），由 var() 函數(shù)來(lái)獲取值（比如： color: **var(--main-color)**;）。
在構(gòu)建大型站點(diǎn)時(shí)，作者通常會(huì)面對(duì)可維護(hù)性的挑戰(zhàn)。在這些網(wǎng)頁(yè)中，所使用的CSS 的數(shù)量是非常龐大的，并且在許多場(chǎng)合大量的信息會(huì)重復(fù)使用。
例如，在網(wǎng)頁(yè)中維護(hù)一個(gè)配色方案，意味著一些顏色在 CSS 文件中多次出現(xiàn)，并被重復(fù)使用。當(dāng)你修改配色方案時(shí)，不論是調(diào)整某個(gè)顏色或完全修改整個(gè)配色，都會(huì)成為一個(gè)復(fù)雜的問(wèn)題，不容出錯(cuò)，而單純查找替換是遠(yuǎn)遠(yuǎn)不夠的。
如果使用了CSS 框架，這種情況會(huì)變得尤其糟糕，此時(shí)如果要修改顏色，則需要對(duì)框架本身進(jìn)行修改。
在這些場(chǎng)合使用 LESS 或 Sass 類似的預(yù)處理器是非常有幫助的，但是這種通過(guò)添加額外步驟的方式，可能會(huì)增加系統(tǒng)的復(fù)雜性。
CSS變量為我們帶來(lái)一些預(yù)處理器的便利，并且不需要額外的編譯。
這些變量的第二個(gè)優(yōu)勢(shì)就是名稱本身就包含了語(yǔ)義的信息。CSS 文件變得易讀和理解。main-text-color比文檔中的#00ff00更容易理解，特別是同樣的顏色出現(xiàn)在不同的文件中的時(shí)候。
下面是 CSS 變量的使用方法和步驟。
我們都知道，在 JS 中要使用一個(gè)變量前，必須聲明這個(gè)表變量。在 CSS 中也是一樣的道理。
聲明一個(gè)自定義屬性，屬性名需要以兩個(gè)減號(hào)（--）開(kāi)始，屬性值則可以是任何有效的CSS值。和其他屬性一樣，自定義屬性也是寫(xiě)在規(guī)則集之內(nèi)的，如下：
body {
--bg-color: #7F583F;
--color: #F7EFD2;
}上面代碼中，body選擇器里面聲明了兩個(gè)變量：--bg-color和--color。
它們與color、font-size等正式屬性沒(méi)有什么不同，只是沒(méi)有默認(rèn)含義。所以 CSS 變量（CSS variable）又叫做**"CSS 自定義屬性"**（CSS custom properties）。
規(guī)則集所指定的選擇器定義了自定義屬性的可見(jiàn)作用域。通常的最佳實(shí)踐是定義在根偽類 :root下，這樣就可以在HTML文檔的任何地方訪問(wèn)到它了：
:root {
--main-bg-color: #eee;
}自定義屬性名是大小寫(xiě)敏感的，--my-color 和 --My-color 會(huì)被認(rèn)為是兩個(gè)不同的自定義屬性。
通過(guò)var()函數(shù)來(lái)讀取變量。語(yǔ)法如下:
var(custom-property-name, value)變量名稱必須以兩個(gè)破折號(hào)（--）開(kāi)頭，且區(qū)分大小寫(xiě)！
使用方法：
element {
background-color: var(--main-bg-color);
}變量也可以使用在變量聲明中：
:root {
--primary-color: #eee;
--primary-bg-color: var(--main-bg-color);
}變量值只能用作屬性值，不能用作屬性名。
在 JS 代碼中，我們可能需要讀取 CSS 變量的值，其方法如下：
const root = document.querySelector(":root");
// 設(shè)置 CSS 變量
root.style.setProperty("--main-bg-color", "red");
// 讀取 CSS 變量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// 刪除 CSS 變量
root.style.removeProperty("--main-bg-color");以上就是關(guān)于 CSS 變量的一些基本概念及使用方法，更多詳情待后續(xù)！
靈活使用 CSS 變量，不僅可以提高生產(chǎn)力，也能夠提高代碼的可閱讀性和維護(hù)性。
~
~
~ 本文完
學(xué)習(xí)有趣的知識(shí)，結(jié)識(shí)有趣的朋友，塑造有趣的靈魂！
大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號(hào)是『編程三昧』，歡迎關(guān)注，希望大家多多指教！
知識(shí)與技能并重，內(nèi)力和外功兼修，理論和實(shí)踐兩手都要抓、兩手都要硬！
果你正在構(gòu)建網(wǎng)站或Web應(yīng)用程序，你應(yīng)該已經(jīng)知道代碼重復(fù)被認(rèn)為是一種不良實(shí)踐。
這就是為什么你應(yīng)該學(xué)習(xí)如何使用CSS變量來(lái)減少你編寫(xiě)的CSS代碼量并將你的樣式帶到一個(gè)新的水平。
最成功的Web應(yīng)用程序擁有令人驚嘆的設(shè)計(jì)。不幸的是，為了達(dá)到預(yù)期的效果，Web開(kāi)發(fā)人員需要準(zhǔn)備大量的樣式。這迫使我們?cè)谠S多不同的元素中重復(fù)值，比如顏色。
幸運(yùn)的是，現(xiàn)代樣式表支持CSS變量，這使您可以減少代碼庫(kù)中的重復(fù)。你不需要像CSS模塊、Less或SASS這樣的外部工具來(lái)利用它。
在這個(gè)全面的指南中，我將向您展示如何有效地使用CSS變量，涵蓋從純HTML和CSS的基本示例到更高級(jí)的框架，如React和Next.js。
（本文內(nèi)容參考：java567.com）
變量是用于存儲(chǔ)信息的"容器"。
實(shí)例
var x=5;
var y=6;
var z=x+y;
就像代數(shù)那樣
x=5
y=6
z=x+y
在代數(shù)中，我們使用字母（比如 x）來(lái)保存值（比如 5）。
通過(guò)上面的表達(dá)式 z=x+y，我們能夠計(jì)算出 z 的值為 11。
在 JavaScript 中，這些字母被稱為變量。
| 您可以把變量看做存儲(chǔ)數(shù)據(jù)的容器。 |
JavaScript 變量
與代數(shù)一樣，JavaScript 變量可用于存放值（比如 x=5）和表達(dá)式（比如 z=x+y）。
變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。
變量必須以字母開(kāi)頭
變量也能以 $ 和 _ 符號(hào)開(kāi)頭（不過(guò)我們不推薦這么做）
變量名稱對(duì)大小寫(xiě)敏感（y 和 Y 是不同的變量）
| JavaScript 語(yǔ)句和 JavaScript 變量都對(duì)大小寫(xiě)敏感。 |
JavaScript 數(shù)據(jù)類型
JavaScript 變量還能保存其他數(shù)據(jù)類型，比如文本值 (name="Bill Gates")。
在 JavaScript 中，類似 "Bill Gates" 這樣一條文本被稱為字符串。
JavaScript 變量有很多種類型，但是現(xiàn)在，我們只關(guān)注數(shù)字和字符串。
當(dāng)您向變量分配文本值時(shí)，應(yīng)該用雙引號(hào)或單引號(hào)包圍這個(gè)值。
當(dāng)您向變量賦的值是數(shù)值時(shí)，不要使用引號(hào)。如果您用引號(hào)包圍數(shù)值，該值會(huì)被作為文本來(lái)處理。
實(shí)例
var pi=3.14;
var person="John Doe";
var answer='Yes I am!';
聲明（創(chuàng)建） JavaScript 變量
在 JavaScript 中創(chuàng)建變量通常稱為"聲明"變量。
我們使用 var 關(guān)鍵詞來(lái)聲明變量：
var carname;
變量聲明之后，該變量是空的（它沒(méi)有值）。
如需向變量賦值，請(qǐng)使用等號(hào)：
carname="Volvo";
不過(guò)，您也可以在聲明變量時(shí)對(duì)其賦值：
var carname="Volvo";
在下面的例子中，我們創(chuàng)建了名為 carname 的變量，并向其賦值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：
實(shí)例
<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
| 一個(gè)好的編程習(xí)慣是，在代碼開(kāi)始處，統(tǒng)一對(duì)需要的變量進(jìn)行聲明。 |
一條語(yǔ)句，多個(gè)變量
您可以在一條語(yǔ)句中聲明很多變量。該語(yǔ)句以 var 開(kāi)頭，并使用逗號(hào)分隔變量即可：
var lastname="Doe", age=30, job="carpenter";
聲明也可橫跨多行：
var lastname="Doe",
age=30,
job="carpenter";
Value = undefined
在計(jì)算機(jī)程序中，經(jīng)常會(huì)聲明無(wú)值的變量。未使用值來(lái)聲明的變量，其值實(shí)際上是 undefined。
在執(zhí)行過(guò)以下語(yǔ)句后，變量 carname 的值將是 undefined：
var carname;
重新聲明 JavaScript 變量
如果重新聲明 JavaScript 變量，該變量的值不會(huì)丟失：
在以下兩條語(yǔ)句執(zhí)行后，變量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;
JavaScript 算數(shù)
您可以通過(guò) JavaScript 變量來(lái)做算數(shù)，使用的是 = 和 + 這類運(yùn)算符：
實(shí)例
y=5;
x=y+2;
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
