CSS變量的出現，為前端開發帶來了很多便捷性，例如頁面風格的統一性，提高了代碼的可讀性和維護性。但在使用過程中，如何通過CSS讀取變量呢？

:root {
--bg-color: #f5f5f5;
}
.container {
background-color: var(--bg-color);
}

以上代碼中，我們定義了一個名為“--bg-color”的變量，并將其賦值為#f5f5f5。在.container選擇器中使用var函數，指定變量名即可，此時.container的背景色就會變為#f5f5f5。

此外，CSS變量不僅可以直接使用var函數讀取，也可以通過JavaScript訪問和更改。

:root {
--font-size: 16px;
}
document.documentElement.style.setProperty('--font-size', '18px');

在JavaScript中，通過document.documentElement.style.setProperty()函數即可更改CSS變量的值。以上代碼中，我們將字體大小--font-size由16px更改為18px。

總結來說，CSS變量的讀取和更改相當簡單易懂，能夠為我們的前端設計提供更多可能性。