CSS中的變量是一個(gè)非常有用的功能，它可以讓我們在整個(gè)樣式表中重復(fù)使用相同的值。除了更好的可讀性和可維護(hù)性，這也能讓我們更輕松地對整個(gè)樣式表做出更改。 在CSS中引入變量非常簡單。我們可以使用CSS的自定義屬性來定義變量，然后在樣式表中引用它們。 下面是一個(gè)簡單的例子，來展示如何在CSS中定義一個(gè)變量并將其引用到樣式規(guī)則中：

:root {
--main-color: #5898c9;
}
p {
color: var(--main-color);
}

在這個(gè)例子中，我們使用了“:root”偽類來定義一個(gè)名為“--main-color”的變量，它的值被設(shè)置為藍(lán)色。” 接下來，我們將“--main-color”變量引用到“p”元素中，這樣“p”元素的文字顏色就會設(shè)置為藍(lán)色。 我們可以在整個(gè)樣式表中重復(fù)使用“--main-color”變量，這樣我們只需要在一個(gè)地方更新它，就可以改變整個(gè)樣式表的外觀。 我們還可以為變量設(shè)置默認(rèn)值。例如：

:root {
--main-color: #5898c9;
--secondary-color: #ccc;
}
p {
color: var(--secondary-color, var(--main-color));
}

在這個(gè)例子中，我們定義了兩個(gè)變量，一個(gè)是主要顏色，“--main-color”，另一個(gè)是次要顏色，“--secondary-color”。在“p”元素中，我們引用了變量“--secondary-color”，但是我們還在其中添加了一個(gè)默認(rèn)值“--main-color”。 這意味著，如果“--secondary-color”未定義，則“--main-color”將被用作默認(rèn)值。這使我們的樣式表更加靈活和可維護(hù)。 在這里，我們解釋了在CSS中引入變量的基礎(chǔ)知識。通過使用變量，我們可以讓樣式表更易于維護(hù)和修改。如果你想更深入了解變量和其他CSS特性，請查看我們的其他教程。