CSS變量是CSS3的一個新特性，它允許我們在CSS中定義和使用變量。這些變量可以用來存儲顏色、大小、字體等值，然后可以在整個樣式表中引用它們。它使代碼更加清晰易懂，可重用性更高。 要在CSS中定義變量，我們使用var()函數來引用一個變量。如下所示：

:root {
--main-color: #999999;
}
p {
color: var(--main-color);
}

在這個例子中，我們在:root偽類中定義了一個名為--main-color的變量，并將其設置為灰色。然后，我們在p元素的樣式中，使用var()函數來引用該變量的值，使文本顏色為灰色。 CSS變量不僅可以用于顏色值，還可以用于其他CSS屬性，例如：

:root {
--size: 12px;
--font: Arial, sans-serif;
}
p {
font-size: var(--size);
font-family: var(--font);
}

在這個例子中，我們定義了兩個變量：--size和--font。我們使用var()函數來引用這些變量并將值分別指定為段落的字體大小和字體系列。 總之，CSS變量是一種很好的方法來簡化和減少CSS代碼中的重復。當我們想要更改樣式時，只需更改變量的值，然后整個樣式表中該變量的所有引用都會自動更新。這是一種更加靈活、可維護的方式來管理CSS的樣式。