CSS是前端開發中常用的樣式語言，可以讓我們將HTML文檔變得更加美觀。一些 CSS 的新特性，在制作樣式時可以更加方便。其中最有用的一項就是定義變量。下面讓我們來學習一下如何在 CSS 中定義變量。

:root {
--mainColor: #ff6600;
--secondColor: #00ff66;
}
p {
color: var(--mainColor);
}
.box {
background-color: var(--secondColor);
}

上面的代碼中，我們通過在:root偽類中定義變量--mainColor和--secondColor，并將它們賦值為顏色值。

在p標簽的樣式中，我們可以使用color: var(--mainColor);來引用這個變量，這樣我們就把這個顏色值引用到了該標簽。同樣的方法也可以使用于其他屬性中。

在.box類的樣式中，我們同樣可以使用background-color: var(--secondColor);的方式來引用該變量。

這種定義變量的方式使用場景十分廣泛，尤其是在大型項目中，帶有大量的樣式表的地方。使用變量可以讓你更好的控制你的樣式，避免了出現重復的顏色名字，同時代碼也變得易于維護。

總之，CSS 定義變量是一種十分有用的新特性。可以方便我們對樣式進行調整和修改，同時也能減少我們的代碼重復度和維護困難度。