< p >當(dāng)我們寫 CSS 樣式時(shí)，經(jīng)常會(huì)發(fā)現(xiàn)有一些重復(fù)的屬性值需要在多個(gè)地方使用，這時(shí)候就可以考慮使用 CSS 變量來(lái)簡(jiǎn)化代碼的編寫。在 CSS 中，變量的書寫方式有兩種：< pre >/* 第一種：全局變量 */ :root { --main-color: #007bff; /* 定義全局顏色變量 */ } /* 第二種：局部變量 */ .box { --box-width: 200px; /* 在.box類中定義局部變量 */ }< /pre >上面的代碼演示了兩種不同的定義方式。全局變量以 :root 為選擇器，然后用雙減號(hào) -- 來(lái)定義變量名和變量值。局部變量則是在給定的類或選擇器內(nèi)定義變量。 在使用變量時(shí)也有兩種方式：< pre >/* 第一種：使用全局變量 */ h1 { color: var(--main-color); /* 引用全局變量 */ } /* 第二種：使用局部變量 */ .box { width: var(--box-width); /* 引用局部變量 */ }< /pre >使用時(shí)，可以像普通屬性一樣在屬性值中使用變量。同樣有兩種方式：引用全局變量和引用局部變量。 通過(guò)使用 CSS 變量，我們可以方便地修改樣式中的公共屬性，從而簡(jiǎn)化代碼，提高開(kāi)發(fā)效率。