在CSS的樣式表中，我們可以使用變量來存儲和重復使用值。這些變量使用CSS自定義屬性來定義，并且可以在整個樣式表中使用。

:root {
--primary-color: #FF0000;
--secondary-color: #00FF00;
}
h1 {
color: var(--primary-color);
}
p {
color: var(--secondary-color);
}

在這個例子中，我們定義了兩個自定義屬性，分別命名為--primary-color和--secondary-color，并賦予了它們特定的顏色值。在h1的樣式中，我們使用--primary-color變量來設置文本顏色，而在p的樣式中，我們使用--secondary-color變量來設置文本顏色。這使得我們只需要修改這些變量的值就可以輕松地更改顏色方案。

另一個例子展示了變量如何可以用于擴展和調整元素間距：

:root {
--padding: 10px;
}
.wrapper {
padding: var(--padding);
}
.content {
margin-top: var(--padding);
}

在這個例子中，我們定義了一個名為--padding的自定義屬性，并將其設置為10像素。這個值可以應用到.wrapper元素的padding屬性中，并在.content元素的頂部外邊距中使用。通過這種方式，我們可以輕松地維護一致的間距，同時允許調整整個樣式表中的單個變量。

在CSS中使用變量是一個非常方便的方式來管理整個樣式表中的值。但需要注意的是，變量定義的作用域是它們被定義的選擇器范圍內。因此，在需要全局使用變量的情況下，我們應該在:root選擇器中定義它們。同時，我們還需要注意不要過度地使用變量，這可能會導致代碼可讀性下降。