CSS變量是CSS3新特性之一，它使得在CSS中定義、使用和維護變量變得更加容易。CSS變量也被稱為自定義屬性，可以用于定義某些CSS屬性值中的固定值，比如顏色、寬度、高度等等。在這篇文章中，我們將介紹如何使用CSS變量來為你的網頁添加一些獨特的樣式。 首先，在你的CSS文件中定義變量，可以使用--開頭的屬性名，并使用var()函數引用它們。例如，下面的示例中定義了一個--main-color變量，用于設置整個網站的主色調：

:root {
--main-color: #1abc9c;
}

這里用:root選擇器定義了變量，意味著所有元素都可以使用這些變量。如果你只希望在某些特定元素中使用變量，可以在它們的父元素中定義變量。 接下來，我們可以使用var()函數在CSS中引用這個變量，如下所示：

h1 {
color: var(--main-color);
}
button {
background-color: var(--main-color);
}

這樣，h1的顏色和button的背景顏色都將使用--main-color變量的值。 除了定義簡單的顏色值，你還可以為你的網頁定義一些更復雜的樣式。比如，你可以使用一個--base-font-size變量來設置整個網站的基本文字大小：

:root {
--base-font-size: 16px;
}
body {
font-size: var(--base-font-size);
}
h1 {
font-size: calc(var(--base-font-size) * 2);
}

在這個例子中，我們定義了一個--base-font-size變量，并在body和h1選擇器中使用了它。同時，在h1中使用了calc()函數，它可以讓你在設置樣式時進行一些數學計算。 CSS變量也可以在JavaScript中動態修改和使用，這對網頁的交互性和動態效果有很重要的作用。你可以使用CSSOM來訪問和修改CSS變量的值，例如：

document.documentElement.style.setProperty('--main-color', '#2ecc71');

這行代碼可以將--main-color變量的值修改為#2ecc71，從而改變整個網站的主色調。 現在你已經學會了如何使用CSS變量了。通過使用變量，你可以讓你的CSS代碼更靈活、更易于維護，同時為網站帶來更加獨特的風格。