在前端開發中，CSS是不可或缺的一部分。它可以幫助我們美化頁面，改善用戶體驗。但是在實際開發中，有時候我們需要更靈活的修改樣式，這就需要使用到CSS變量。

:root{
--primary-color: #ff0000;
}
h1{
color: var(--primary-color);
}

CSS變量可以理解為一種全局變量，在:root中定義后，可以在全局使用。在上述代碼中，定義了一個名為--primary-color的變量，它的值為#ff0000。我們將這個變量賦值給h1標簽的字體顏色，就可以使得所有的h1標簽字體顏色都變成紅色。

但是，如果我們想要根據條件動態改變這個變量的值，該怎么辦呢？這就需要使用CSS變量的好伙伴——var()。

:root{
--primary-color: #ff0000;
--secondary-color: #00ff00;
}
h1{
color: var(--primary-color);
}
@media (max-width: 600px){
h1{
color: var(--secondary-color);
}
}

在上述代碼中，我們定義了一個名為--secondary-color的變量，它的值為#00ff00。并且，在媒體查詢中，我們將h1標簽的顏色改變為--secondary-color。這樣，在屏幕寬度小于600px時，h1標簽字體顏色就會變成綠色。

變量和var()函數不僅可以用于顏色屬性，還可以用于其他屬性，如字體大小、邊框等。這使得我們能夠更加靈活地控制頁面樣式，提升用戶體驗。