CSS的變量是一種重要的特性，可以用來存儲單個或一組值，然后在整個樣式表中供使用。聲明變量后，可以進一步通過輸出、輸入來使用它，這為開發者提供了更靈活、更維護的各式化樣式的方式。

:root {
--main-color: #004165; /* 在根元素中聲明CSS變量 */
}
button {
background-color: var(--main-color); /* 輸出變量的值 */
}

在CSS中聲明變量應該始終使用：root偽類，這是CSS的根元素，任何變量的聲明都應該在這里進行。變量的名稱應該以兩個中劃線作為前綴并以一個名稱為后綴，例如：—main-color。

輸出變量可以通過var()函數來實現，只需要將該函數作為屬性的值寫入即可。在使用時，變量的名稱也需要以兩個中劃線開頭，如上面的例子，--main-color就是一個變量。

button {
--main-color: var(--button-bg-color, #004165);
background-color: var(--main-color);
}

除了輸出變量外，還可以使用var()函數來輸入變量。當調用一個變量時，也可以在CSS中設置默認值，如果這個變量沒有被聲明，則會有一個默認值，默認值放在函數的參數中。

總而言之，CSS變量可以大大提升CSS代碼的重用性和維護性，并且它還提供了更為便捷的方式實現各種復雜的樣式效果。

以上就是有關CSS輸出和輸入變量的內容，希望能對你有所幫助。