CSS 屬性變量是 CSS 中一個非常有用的特性。它可以讓開發者在代碼中定義變量，并在允許使用變量的任意位置引用這些變量。這樣可以極大地提高代碼的可讀性和可維護性。

:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--btn-padding: 10px;
}
.btn {
padding: var(--btn-padding);
background-color: var(--primary-color);
color: var(--secondary-color);
}

在上面的例子中，我們使用了:root偽類來定義屬性變量，然后在 .btn 類中分別使用了這些屬性變量。

屬性變量有一個非常重要的好處是允許我們更加靈活地修改樣式。如果我們需要把主要顏色改為橙色，我們只需要改變一下--primary-color的值即可：

:root {
--primary-color: orange;
--secondary-color: #6c757d;
--btn-padding: 10px;
}
.btn {
padding: var(--btn-padding);
background-color: var(--primary-color);
color: var(--secondary-color);
}

這樣就可以迅速地改變主要顏色而不需要修改多個地方的代碼，降低了代碼的維護難度。

除了屬性變量，var()函數還可以接受一個參數作為默認值。如果變量沒有定義或者引用的位置不在:root中，就會使用該默認值。

:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
.btn {
padding: var(--btn-padding, 10px);
background-color: var(--primary-color);
color: var(--secondary-color);
}

在上面的例子中，當我們沒有在:root中定義--btn-padding的值時，var()函數會使用默認值 10px。

屬性變量是 CSS 中非常強大的一個特性，可以使我們的代碼更加清晰和易于維護。在項目中使用屬性變量會讓你的代碼更加優雅。