原生CSS變量是CSS的一項新特性，它可以幫助開發人員更加有效地管理和控制樣式。 使用變量的方式與其他編程語言中的變量類似。首先定義變量，然后在CSS的任何地方使用該變量。 定義變量的方法很簡單，使用兩個破折號（--）前綴來定義。例如：

:root {
--primary-color: #007bff;
}

這個例子中，我們定義了一個名為“primary-color”的變量，并將其值設置為“#007bff”。 接下來，我們可以將這個變量用于CSS的其他任何部分。比如：

h1 {
color: var(--primary-color);
}

在這個例子中，我們將定義的“primary-color”變量應用到了h1標簽的文字顏色中。 變量還可以設置默認值。例如：

:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--border-radius: 4px;
}

在這個例子中，我們定義了三個變量。其中“primary-color”和“secondary-color”是顏色值，而“border-radius”是像素單位的值。 這些變量可以在CSS中使用，但是如果我們并沒有為它們設置值，那么它們將會使用默認值。

.btn {
background-color: var(--primary-color, red);
color: var(--secondary-color);
border-radius: var(--border-radius);
}

在這個例子中，我們將“primary-color”變量用作.btn類的背景顏色。如果變量沒有值，則使用默認值“red”。 變量還可以通過JavaScript來動態修改。例如：

document.documentElement.style.setProperty('--primary-color', '#ff0000');

這個例子將“primary-color”變量的值設置為紅色。 總之，原生CSS變量是一個非常有用的功能，它可以讓我們更加靈活地控制樣式，同時也很容易使用和修改。