CSS文件定義變量的方法
CSS文件是一種在網頁中對樣式和布局進行定義的文件，而CSS文件定義變量（Variables）則是一種用于簡化CSS聲明重復使用的技術。
一般而言，我們使用CSS的樣式規則都包含了特定的值，如顏色、字體、邊框等，而這些值常常需要在多個樣式規則中重復使用。如果每次都直接在規則中輸入這些值，不僅難以維護，而且不易修改。而CSS變量則可以讓你定義這樣的值，并在稍后的規則中引用。
定義CSS變量的語法與常規的CSS聲明相似，只是在屬性名之前需要使用--作為前綴，如下：

:root {
--main-color: #333;
--main-font: Helvetica, Arial, sans-serif;
}

這里的:root表示使用CSS的根元素（即HTML文檔中的標簽），因為這個元素是所有其他元素的祖先元素，所以在這里定義的變量可以在整個文檔中使用。
變量的值可以是任意CSS聲明的有效值，例如顏色、單位、字體等。一旦定義了變量，就可以在其他CSS規則中使用它，只需要在屬性值中使用var()函數，并在括號中包含變量名，如下：

body {
color: var(--main-color);
font-family: var(--main-font);
}

在這個例子中，我們使用了在:root中定義的--main-color和--main-font變量，并指定了body元素的文本顏色和字體。
如果你需要在JavaScript中操作CSS變量，可以使用document.documentElement來訪問元素，進而通過CSS變量的名稱獲取和設置它的值。例如：

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

這個代碼將會修改CSS變量--main-color的值為紅色（#f00）。
總的來說，使用CSS文件定義變量是一種簡單而實用的技術，它可以幫助我們簡化CSS代碼并提高代碼的可維護性，同時還可以提供更靈活的主題和樣式定制方式。