今天，CSS預處理器是Web開發的標準。 預處理器的一個主要優點是它們使您能夠使用變量， 這有助于您避免復制和粘貼代碼，并簡化了開發和重構。
在本文中，您將了解到如何將CSS變量集成到CSS開發工作流程中，這會使得樣式表更易于維護和不重復性。
現在，讓我開始吧！
1* css變量的語法
<1> 什么是css變量？
如果您使用過任何一種編程語言，那么您應該已經熟悉了變量的概念。 變量允許您存儲和更新程序所需的值以便工作。
在CSS中使用變量的好處與在編程語言中使用變量的好處并沒有太大的不同。
以下是規范對此的說法：
[Using CSS variables] makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editing such files much easier and less error-prone, as one only has to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.W3C Specification .
[使用CSS變量]可以更容易地讀取大文件，因為看似任意的值現在具有信息性名稱，并且使得編輯此類文件更容易且更不容易出錯，因為只需要在自定義屬性中更改一次值 ，這種更改將自動傳播到所有使用該變量的地方。<2>css自定義變量語法
要聲明變量而不是常用的CSS屬性（如顏色或填充），只需提供以 – – 開頭的自定義命名屬性：
.box{
--box-color: #4d4e53;
--box-padding: 0 10px;
}屬性的值可以是任何有效的CSS值：顏色，字符串，布局值，甚至是表達式。
以下是一些有用的自定義屬性：
:root{
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
/* Valid CSS custom properties can be reused later in, say, JavaScript. */
--foo: if(x > 5) this.width = 10;
}如果您不確定 :root，在HTML中它與html相同但具有更高的特異性，相當于全局變量。
<3> css變量的使用
var() 函數
您要通過 var（） 這個 css 函數來使用 css 變量，將 css 變量名傳入這個函數：
.box{
--box-color:#4d4e53;
--box-padding: 0 10px; padding: var(--box-padding);
}
.box div{
color: var(--box-color);
}
var() 函數的語法是：
var( <custom-property-name> [, <declaration-value> ]? ) 新聞熱點
疑難解答
