CSS 中的變量樣式已成為開發者們愈發常用的前端技術。它可以讓我們在頁面樣式的制作中獲得更多的自由，同時也可以讓我們更加靈活地實現樣式的推導。于此，我們一起看下 CSS 文件中定義變量的方法吧！

:root {
--main-color: #2e8b57;
}
body {
color: var(--main-color);
background-color: var(--background-color, #fff);
}

如上代碼示例，":root" 選擇器表示想要定義的基本樣式，若直接定義在 CSS 文件的 ''html''(或其他同級目錄的元素)中，同樣生效。而定義變量格式則為“--xxx”，其中 “xxx” 為改變量名稱，如上例中的 “--main-color” 只是一個自定義的變量名。接下來，在被引用的地方，使用 “var(--變量名稱)” 的方式進行使用即可。

與此不同的是，在變量名末尾加入逗號和默認顏色值的方式，可以避免因忘記定義而產生的錯誤：

body {
color: var(--main-color);
background-color: var(--background-color, #fff);
}

當 "--background-color" 未被定義時，默認 ”#fff" 就會被作為使用此變量的元素的背景顏色，以此避免運行時的錯誤。

此處僅提出部分常用知識點，供大家參考使用。若想了解更多內容，也可以前往MDN官網進行相關學習。