使用CSS中的變量（Variables）可以簡化樣式表的管理和擴展，在CSS中，變量以為前綴，后跟變量名，變量值可以根據(jù)需要在樣式表中引用，使樣式更加靈活和可維護(hù)。

變量的定義

你需要定義一個變量，你可以定義一個顏色變量：

:root {
  --main-color: blue;
}

:root選擇器用于定義全局變量。--main-color是變量名，blue是變量的值。

變量的使用

一旦你定義了一個變量，就可以在樣式表中的任何位置使用它，你可以使用--main-color來設(shè)置元素的背景顏色：

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

這里，var(--main-color)用于引用之前定義的--main-color變量。

變量的優(yōu)勢

使用變量有幾個優(yōu)勢：

1、簡化管理：通過集中管理變量值，可以更容易地更新和修改樣式。

2、提高可讀性：變量名通常更具描述性，使樣式表更容易理解。

3、易于擴展：如果需要添加新顏色或樣式，只需定義新變量即可。

示例

下面是一個完整的示例，展示了如何在CSS中使用變量：

:root {
  --main-color: blue;
  --secondary-color: gray;
}
body {
  background-color: var(--main-color);
  color: var(--secondary-color);
}
h1 {
  color: var(--main-color);
}

在這個示例中，我們定義了兩個顏色變量--main-color和--secondary-color，并在樣式表中使用了它們來設(shè)置背景顏色和文本顏色，這樣，如果將來需要更改主題顏色，只需修改變量的值即可。