css中使用變量

• 2017年3月，微軟宣布 Edge 瀏覽器將支持 CSS 變量。
  這個重要的 CSS 新功能，所有主要瀏覽器已經都支持了。

• 聲明css變量的時候，變量名前面要加兩根連詞線（--）。
  變量名大小寫敏感，--header-color和--Header-Color是兩個不同變量。

• var()函數用於讀取變量。
  var()函數還可以使用第二個參數，表示變量的默認值。如果該變量不存在，就會使用這個默認值。
  第二個參數不處理內部的逗號或空格，都視作參數的一部分。

如果變量值是一個字符串，可以與其他字符串拼接。
如果變量值是數值，不能與數值單位直接連用。必須使用calc()函數，將它們連接。

.foo {
  --gap: 20;
  /* 無效 */
  margin-top: var(--gap)px;
}
.foo {
  --gap: 20;
  /* 有效 */
  margin-top: calc(var(--gap) * 1px);
}

如果變量值帶有單位，就不能寫成字符串。

/* 無效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

===同一個 CSS 變量，可以在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效。這與 CSS 的"層疊"（cascade）規則是一致的。
全局的變量通常放在根元素:root里面，確保任何選擇器都可以讀取它們

:root {
  --main-color: #06c;
}

===對於不支持 CSS 變量的瀏覽器，可以采用下面的寫法。

a {
  color: #7F583F;
  color: var(--primary);
}

也可以使用@support命令進行檢測。

@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

===JavaScript 也可以檢測瀏覽器是否支持 CSS 變量。

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JavaScript 操作 CSS 變量的寫法如下。

// 設置變量
document.body.style.setProperty('--primary', '#7F583F');

// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 刪除變量
document.body.style.removeProperty('--primary');

這意味着，JavaScript 可以將任意值存入樣式表。

那些對 CSS 無用的信息，也可以放入 CSS 變量。

--foo: if(x > 5) this.width = 10;

上面代碼中，--foo的值在 CSS 里面是無效語句，但是可以被 JavaScript 讀取。這意味着，可以把樣式設置寫在 CSS 變量中，讓 JavaScript 讀取。
所以，CSS 變量提供了 JavaScript 與 CSS 通信的一種途徑。