在5分鐘內學習CSS變數
CSS Custom Properties（也稱為Variables）是前端開發人員的一大勝利。它為CSS帶來了變數的強大功能，從而減少了重複次數，提高了可讀性並增加了靈活性。
另外，與CSS預處理器的變數不同，CSS變數實際上是DOM的一部分，它有很多好處。所以它們基本上就像類固醇上的SASS和LESS變數一樣。在本文中，我將為您提供有關這項新技術如何運作的速成價格。
我還創建了一個關於CSS變數的免費互動式8部分價格，如果你想成為這個主題的專家，請查看它。
想學習CSS變數嗎？這是我免費的8部分價格
為什麼要學習CSS變數？
在CSS中使用變數有很多原因。其中最引人注目的是它減少了樣式表中的重複。
在上面的例子中，為它創建一個變數要好得多 #ffeead 顏色比重複它，就像我們在這裡做的那樣：
這不僅可以使您的代碼更易於閱讀，而且還可以為您提供更大的靈活性，以防您想要更改此顏色。
現在，多年來SASS和LESS變數確實可以實現。但是，CSS變數有一些很大的好處。
- 它們不需要任何轉換工作，因為它們是瀏覽器的本機。因此，您不需要任何設置即可開始，就像使用SASS和LESS一樣。
- 他們生活在DOM中，這帶來了很多好處，我將在本文和即將開始的價格中介紹。
現在讓我們開始學習CSS變數
聲明你的第一個CSS變數
要聲明變數，首先需要確定變數應該存在哪個範圍。如果希望全局可用，只需在變數上定義它。 :root 偽類。它匹配文檔樹中的根元素（通常是 標籤）。
隨著變數的繼承，這將使您的變數在整個應用程序中可用，因為所有DOM元素都是變數的後代 標籤。
:root { --main-color: #ff6f69; } 如您所見，您聲明一個變數的方式與設置任何CSS屬性的方式相同。但是，變數必須以兩個達世幣開頭。
要訪問變數，您需要使用 var() 函數，並將變數的名稱作為參數傳遞。
#title { color: var(--main-color); } 這將給你的頭銜 #f6f69 顏色：
聲明一個局部變數
您還可以創建局部變數，這些變數只能在其聲明的元素及其子元素中訪問。如果您知道變數僅用於應用程序的特定部分（或多個部分），則這是有意義的。
例如，您可能有一個警告框，它使用了一種特殊的顏色，這些顏色未在應用程序的其他位置使用。在這種情況下，避免將其放在全局範圍內可能是有意義的：
.alert { --alert-color: #ff6f69; } 該變數現在可由其子項使用：
.alert p { color: var(--alert-color); border: 1px solid var(--alert-color); } 如果你嘗試過使用 alert-color 變數在應用程序的其他位置，例如在導航欄中，它根本不起作用。瀏覽器只會忽略那一行CSS。
更容易響應變數
CSS Variables的一大優勢是它們可以訪問DOM。 LESS或SASS不是這種情況，因為它們的變數被編譯成常規CSS。
實際上，這意味著您可以根據屏幕寬度更改變數：
:root { --main-font-size: 16px; } media all and (max-width: 600px) { :root { --main-font-size: 12px; } } 使用這些簡單的四行代碼，您可以在小屏幕上查看整個應用程序中的主要字體大小。很優雅，對吧？
如何使用JavaScript訪問變數
生活在DOM中的另一個優點是，您可以使用JavaScript訪問變數，甚至可以根據用戶交互更新它們。如果您想讓您的用戶能夠更改您的網站（例如調整字體大小），這是完美的。
讓我們繼續本文開頭的示例。在JavaScript中抓取CSS變數需要三行代碼。
var root = document.querySelector(':root'); var rootStyles = getComputedStyle(root); var mainColor = rootStyles.getPropertyValue('--main-color'); console.log(mainColor); --> '#ffeead' 要更新CSS變數，只需調用 setProperty 聲明變數的元素的方法，並將變數名稱作為第一個參數傳遞，將新值作為第二個參數傳遞。
root.style.setProperty('--main-color', '#88d8b0') 這種主色可以改變應用程序的整體外觀，因此非常適合用戶設置網站主題。
通過更新單個變數，您可以更改導航欄，文本和項目的顏色。
瀏覽器支持
目前，全球網站流量的77％支持CSS變數，其中近90％在美國。我們已經在Scrimba.com上使用CSS變數一段時間了，因為我們的觀眾非常精通技術，並且大多使用現代瀏覽器。
好的，就是這樣。我希望你學到了一些東西
如果你想正確學習它，請務必查看我在Scrimba的免費CSS變數價格。
謝謝閱讀我叫Per，我是Scrimba的聯合創始人，我喜歡幫助人們學習新技能。如果您想收到有關新文章和資源的通知，請在Twitter上關注我。