CSS中的變量是近年來一個非常實用的特性。在過去，CSS中的屬性值需要不斷的重復書寫，這很容易出現錯誤或者造成代碼冗長不易維護。而現在使用變量，我們可以把一些常用的屬性值，比如顏色，大小，字體等，保存到變量里，做到一次定義，全局使用。

:root {
--main-color: #036379; /*定義變量*/
}
.navbar {
background-color: var(--main-color); /*使用變量*/
}

如上面這個例子，我們用:root定義了一個變量main-color，將其值設置為#036379。接著，我們在.navbar的background-color屬性里使用了var()函數來調用這個變量。這樣，.navbar的背景顏色就會變成#036379。如果想要修改顏色，只需要改變變量的值，那么整個站點的顏色也就修改了。

除了顏色，我們可以使用變量來定義一些尺寸，比如字體大小，padding等等。另外，變量也可以互相引用，甚至可以計算。

:root {
--card-width: 300px;
--card-height: calc(var(--card-width) * 0.75); /*計算變量*/
}
.card {
width: var(--card-width); /*使用變量*/
height: var(--card-height);
}

如上例，我們定義了兩個變量，一個是卡片的寬度card-width，另一個是卡片的高度card-height。card-height的值通過calc()函數來計算，它是card-width的75%。最后，我們在.card的寬高屬性里使用了這兩個變量。

總的來說，CSS中的變量，讓我們的樣式更加優雅，更加易于維護。但是需要注意，在一些加強版的瀏覽器中才支持變量這個特性。所以，需要在應用中進行兼容性的考慮。