#09 原生的 Css 變數，基本與進階應用

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。

---

CSS 變數（CSS Variables）可以讓人在整個網站的樣式中輕鬆重複使用相同的值，更輕鬆地調整網站的外觀，同時保持一致性。以往 CSS 要使用變數必須透過 Sass (SCSS) 或 Less 等預處理器才能實現，但現在有了原生的 CSS 變數，已開始廣泛運用在網頁上了。

今天，就讓我們來了解如何使用 CSS 變數吧！

↓ 今日學習重點 ↓

• 了解如何設定 CSS 變數，並且使用它們

---

基礎知識

定義變數

在CSS中，可以使用--前綴來定義變數。而上一篇有提過 :root 選擇器，指的是 HTML 的全域，如果我們希望這個變數 HTML 全部範圍都能使用，就要將變數設定在這裡。例如：

:root{
    --color-default: #666;
}

在這個例子中，我們定義了一個名為 --color-default 的變數，並賦值為#666（灰色）。