CSS文件添加變量是一種很方便的方法，在樣式表中定義變量可以簡化代碼，減少重復，提高維護性。下面我們來看一下如何在CSS中添加變量。
首先，我們需要在樣式表文件中定義變量的值。在CSS3中，我們可以使用var()函數來引用定義的變量。例如，我們定義一個變量$primary-color，它的值為#007bff，我們可以這樣引用該變量：

:root {
--primary-color: #007bff;
}
p {
color: var(--primary-color);
}

在上面的代碼中，我們在:root規則中定義了一個變量--primary-color，并將其值設置為#007bff。接著，在p規則中使用var()來引用該變量，并將p元素的文字顏色設置為--primary-color定義的顏色。
這樣，我們就可以實現在CSS中定義變量的功能，而且這個變量可以被用在整個樣式表中。如果需要修改這個顏色，我們只需要在:root規則中修改變量的值，整個樣式表中使用了該變量的元素都會隨之變化。
除了直接在:root規則中定義變量，我們還可以在任何用到var()函數的元素內部定義變量。例如：

p {
--primary-color: #007bff;
color: var(--primary-color);
}

在這個例子中，我們在p規則中定義了一個變量--primary-color，并將其值設置為#007bff。接著，在顏色屬性中使用var()來引用該變量。
以上是CSS文件添加變量的方法，有了它，我們可以更方便的管理樣式表，減少代碼量，提高開發效率。