【CSS】我如何解釋CSS變數的好

部落格說明

文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！

說明

其實多說變數有多好，幹我們這行的都知道。就說JS，沒了變數，那程式碼就亂了套。那可讀性和程式碼的篇幅，都讓程式設計師成為一次性工，沒法複用。

所以CSS的變數的作用非常之大（原諒沒啥墨水的程式設計師），雖說CSS邏輯沒有那麼複雜，但對於程式碼的可讀性有著大大的增強。CSS作為樣式官，那麼良好的程式碼風格，不正是符合它的風格嗎。

CSS 變數可以訪問 DOM，這意味著您可以建立具有區域性或全域性範圍的變數，使用 JavaScript 來修改變數，以及基於媒體查詢來修改變數。

對於一些字型或者顏色來說，用變數是最好的選擇。

var()函式

var() 函式用於插入 CSS 變數的值。

語法

var(name, value)

值	描述
name	必需。變數名（以兩條破折號開頭）。
value	可選。回退值（在未找到變數時使用）。

全域性使用

全域性使用的話在 :root 選擇器中宣告。

:root 選擇器匹配文件的根元素。

:root {
  --blue: #1e90ff;
}

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

區域性使用

區域性使用就是有區域性作用域的變數，只需要在使用它的選擇器中宣告。

element {
  --main-bg-color: brown;
  background-color: var(--main-bg-color);
}

變數的型別

字串

如果變數值是一個字串，可以與其他字串進行拼串

 --main:"hello";
 --text: var(--main)"world ! ";

數值

如果變數的值為數值，則在使用的時候不可以與數值單位直接連用

.text {
  --main: 30;
  /* 無效 */
  margin-top: var(--main)px;
}

需要使用的時候需要通過calc()函式

.text {
  --main: 30;
  margin-top: calc(var(--main) * 1px);
}

如果在賦值的時候帶著單位的話，直接寫，不需要使用字串形式，否則無效。

響應式佈局

CSS 是動態的，頁面的任何變化，都會導致採用的規則變化。

在響應式佈局的 media命令裡面宣告變數，可以讓不同螢幕有著不同的變數值

body {
  --primary: #DE783F;
  --success: #E7ED2F;
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EF29;
    --success: #FF753F;
  }
}

@media screen and (min-width: 1440px) {
  body {
    --primary:  #F745F2;
    --success: #E7F53F;
  }
}

span {
  color: var(--primary);
  text-decoration-color: var(--success);
}

瀏覽器支援

表格中的數字註明了完全支援該屬性的首個瀏覽器版本。

總結

CSS可以減輕工作的複雜性，更方便修改和新增，改一處就能應用到其他地方。
變數本身是包含語義的資訊，使程式碼更易於閱讀（更容易理解）。main-theme-color比單純出現在文件中的#e3ff34要更加容易理解，也方便改動。在不同的檔案中出現相同的顏色也好定義說明。

感謝

萬能的網路
以及勤勞的自己，個人部落格，GitHub測試，GitHub
公眾號-歸子莫，小程式-小歸部落格

【CSS】我如何解釋CSS變數的好