CSS 原生變量使用教程和幾個 Tips

2017年3月，Edge 瀏覽器支持 CSS 變量。

聲明

變量名前面要加兩根連詞線(--)

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}
複製代碼

上面代碼中有兩個變量，--foo 和 --bar（爲何用--？由於$被 Sass 用了，@被 less 用了）

各值均可以放入 CSS 變量，好比變量名中帶-。

變量名大小寫敏感。

var() 函數

var() 函數用於讀取變量，也可用於變量聲明，只能做爲屬性值，不能用做屬性名。

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}
:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}
複製代碼

var 函數第二個參數，表示變量的默認值。參數能夠帶逗號和空格。

color: var(--foo, #7F583F);
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);
複製代碼

變量值的類型

字符串：能夠與其它字符串進行拼接。

--bar: 'hello';
--foo: var(--bar)' world';
複製代碼

數值：不能與數值單位直接連用，必須使用 calc() 函數。若是變量值帶有單位，不能寫成字符串，直接寫：--foo: 20px;

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

做用域

同一個 CSS 變量，能夠在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效。這與 CSS 的「層疊」規則是一致的。

<style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } </style>

<p>藍色</p>
<div>綠色</div>
<div id="alert">紅色</div>
複製代碼

變量的做用域就是它所在的選擇器的有效範圍，全局的變量一般放在根元素 :root 裏面，確保任何選擇器均可以讀取。

響應式佈局

能夠在 media 命令裏聲明變量，使得不一樣的屏幕寬度有不一樣的變量值。

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}
複製代碼

兼容性處理

不支持 CSS 變量的瀏覽器，採用如下寫法

a {
  color: #7F583F;
  color: var(--primary);
}
也能夠使用@supports命令進行檢測。
@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}
複製代碼

JS操做

檢測瀏覽器是否支持 CSS 變量。

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

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}
複製代碼

操做 CSS 變量。

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

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

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

JS 能夠將任意值存入樣式表，也能夠讀取任意 CSS 變量值。CSS 變量提供了一種 JS 與 CSS 通訊的一種途徑。

tips

currentColor

當前文本顏色。

.xxx { border: 1px solid currentColor; }
複製代碼

應用：icon 和 a 標籤一塊兒變色

僞元素 Content

/* 無效 */
.bar::before {
    content: var(--percent);
}
複製代碼

解決：利用 CSS 計數器呈現 CSS var 變量的值。content 屬性自己不支持變量，可是 count-reset 屬性後面的計數器初值是支持的。

/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}
複製代碼

本文主要參考：

www.ruanyifeng.com/blog/2017/0…

www.zhangxinxu.com/wordpress/2…

www.zhangxinxu.com/wordpress/2…