這篇文章主要講解了“使用CSS變量有什么好處”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“使用CSS變量有什么好處”吧！

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于網(wǎng)站設計制作、成都做網(wǎng)站、天寧網(wǎng)絡推廣、重慶小程序開發(fā)公司、天寧網(wǎng)絡營銷、天寧企業(yè)策劃、天寧品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供天寧建站搭建服務，24小時服務熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

什么是CSS變量？

如果你曾使用過某種編程語言，那么你已經(jīng)很熟悉變量這個概念了。變量用于存儲和更新你的程序所需要的值，以便使它運行。

例如，考慮下面的JavaScript代碼

let number1 = 2;

let number2 = 3;

let total = number1 + number2;

console.log(total); // 5

number1 = 4;

total = number1 + number2;

console.log(total); // 7

nubmer1和 number2是兩個變量，分別存儲著數(shù)字2和3。

total同樣是變量，存儲著number1與number2之和。在這里它的值就是5。你可以動態(tài)地修改變量里的值，并在程序中使用它們。在上面的代碼中，我把number1的值更新為4，然后再進行求和。使用相同的變量，這個時候total里存儲的值就是5，而不再是7了。

使用變量的妙處在于，它可以讓你在一個地方存儲值，并且讓你在后面能以各種理由去更新它。在程序中，你不需要為不同的值再添加額外的字符表示：任何值的更新都發(fā)生在同一個地方。正如，在你定義的變量上。

CSS在很大程度上是一種聲明式的語言，而缺少動態(tài)能力。你也許會認為，讓CSS擁有變量，幾乎讓上面的說法自相矛盾。如果前端開發(fā)僅僅是關于文字游戲，那可以這么說。幸運的是，Web的編程語言很像生活中的語言，它們會隨著周圍環(huán)境和實踐需要而不斷進化與適應。CSS也同樣如此。

簡單的說，變量已經(jīng)成為CSS世界中激動人心的事實，并且你即將親自看到，對于這個厲害的新技術，學習和使用起來都非常直觀。

使用CSS變量有什么好處？

使用CSS變量的好處，跟在其他編程語言中使用變量的好處沒什么大的區(qū)別。

規(guī)范是這樣描述這一點的

使用CSS變量，給看似隨機的值加上富有信息的名字，從而使得大文件更容易閱讀和編輯，更少出錯。因為，你只需要在自定義屬性中改變一次值，所有應用了這個變量的地方都會自動跟著一起改變。W3C 規(guī)范

換句話說，通過給變量起一個對你來說在項目中有意義的名字，你能更容易的管理和維護你的代碼。例如，當你為項目中的主色調設置一個變量名--primary-color，那么你后面再修改這個主色調時，只需要改動一處，而不需要在不同位置的多個CSS文件中去手動修改多次值。

CSS變量和預處理器中的變量有什么不同？

你可能已經(jīng)在CSS預處理器中嘗試過使用變量而帶來的好處了，比如Sass和Less。

預處理器讓你能設置變量，以及在函數(shù)、循環(huán)、數(shù)學計算等等地方中使用它們。這是否意味著CSS變量已經(jīng)無關緊要了呢？

那可未必，主要是因為，CSS變量與預處理器中的變量其實是不同的東西。

這些不同基于一個事實：CSS變量是瀏覽器中直接可用的CSS屬性，而預處理中的變量是用于編譯成常規(guī)的CSS代碼，瀏覽器其實對它們一無所知。

這意味著，你可以在樣式表中，在內聯(lián)樣式中，在SVG的標簽中直接更新CSS變量，甚至可以在運行時用JavaScript直接修改它。而你是無法對預處理器中的變量做上面這些操作的。CSS變量開啟了一個充滿可能性的新世界大門。

不是說你必須要在兩者間做出選擇：沒有什么東西限制你，你可以同時使用CSS變量和預處理變量，并享有它們各自帶來的巨大好處。

CSS變量：語法

雖然本文為了簡潔，我使用了CSS變量(CSS variables)這個稱呼，但官方的規(guī)范把它們稱作作為級聯(lián)變量的CSS自定義屬性(CSS custom properties for cascading variables)。*CSS自定義屬性(CSS custom property)*的部分看起來像這樣：

--my-cool-background: #73a4f4;

在自定義屬性前添加雙橫線前綴，然后像給普通CSS設值一樣，給自定義屬性設值。在上面的代碼中，我給一個叫做--my-cool-backgroud的自定義屬性設置了一個顏色值。

而 級聯(lián)變量(cascading variable)的部分，由通過val()來使用你的自定義屬性組成，開起來像這樣：

var(--my-cool-background);

自定義屬性作用于CSS選擇器中，val()可被當成一個真正的CSS屬性一樣使用。

:root {

    --my-cool-background: #73a4f4;

}

/* CSS文件的其他部分 */

#foo {

    background-color: var(--my-cool-background);

}

上面的代碼片段把--my-cool-background這個自定義屬性的作用域定義在:root這個偽類中，這讓該自定義屬性能被全局訪問到（即在標簽內部的任何地方）。然后，使用val()函數(shù)把ID為foo的容器的background-color設置為自定義屬性的值，這時該容器就有了淺藍的背景色。

這還沒完。你可以用同樣的淺藍色，給多個HTML標簽的多種可以設置顏色值的地方設值，比如設置它們的color和border-color。方法很簡單，就是通過var(--my-cool-background)拿到自定義屬性的值，然后給合適的CSS屬性設置上去。（當然，在事情變得復雜之前，我建議思考一下你的CSS變量命名規(guī)范）:

p {

    color: var(--my-cool-background);

}

示例1代碼，可點擊查看。

你還可以從通過利用CSS變量獲得另一個CSS變量的值。例如：

--top-color: orange;

--bottom-color: yellow;

--my-gradient: linear-gradient(var(--top-color), var(--bottom-color));

上面的代碼創(chuàng)建了一個--my-gradient變量，是一個漸變樣式，它的值被設為--top-color的值和--bottom-color的值組合的結果。現(xiàn)在，你可以在任何時候修改你的漸變樣式，僅僅是修改變量的值就可以了，而不再需要在樣式表里滿文件地去找用到這個漸變樣式地方。

示例2代碼。

最后，你可以在CSS變量中加入一個或多個備用值(fallback value/s)，例如：

var(--main-color, #333);

上面的代碼中，#333是一個備用值。當自定義屬性值無效或未指定(unset)時，如果這時也沒有指定備用值，那么被繼承的(inherited)屬性值將會被使用。

CSS變量是區(qū)分大小寫的

與普通CSS屬性不同，CSS變量是區(qū)分大小寫的。

例如，var(--foo)和var(--FOO)是在求兩個不同的自定義屬性值，分別是--foo和--FOO的。

CSS變量受級聯(lián)關系影響

和普通CSS屬性一樣，CSS變量是可繼承的。例如，我們定義了一個屬性，值為blue:

:root {

    --main-color: blue;

}

當你給任意在標簽里的元素指定--main-color變量時，它們都會繼承到blue這個值。

當你在另一個元素里，為改自定義屬性設置了一個新值時，那么所有該元素的子元素都會繼承那個新值。例如：

:root {

    --main-color: blue;

}

.alert {

    --main-color: red;

}

p {

    color: var(--main-color);

}

<--! HTML -->

      
blue 的段落

        
red 的段落