[譯] 不容錯過的CSS變量

Bobi.ink

2019-07-06

原文連結: Don’t miss out on css variables

當我第一次聽說CSS變量時，我是抱着懷疑太多的。scss、sass、less和stylus這些CSS預處理器不是都有變量機制嗎? 為什麼還要使用它？過了幾年，我發現越來越多的人開始讨論和使用它，我覺得我是錯過了什麼…… 雖然花費了一點功夫，但在使用後，我确實被它吸引住了。這篇文章我會闡述到底是什麼推動我進一步去探索CSS變量，并在實際項目中使用它。

用法

在選擇器裡面聲明變量，變量名以

--

作為字首:

div {
  --bgColor: deeppink;
}           

複制

一個流行的方式是在

:root

選擇器中定義變量，這相當于定于全局變量:

:root {
  --bgColor: teal;
}           

複制

通過

var()

函數來引用變量:

div {
  background: var(--bgColor);
}           

複制

var()

函數還可以接受一個參數，用作變量的預設值，當變量未定義時回退到這個預設值:

header {
  background: var(--bgColor);
  color: var(--color, beige);
}           

複制

上面代碼的運作結果如下:

主題

利用CSS變量，可以很容易地實作主題機制.

在body元素上為不同的主題建立不同的類名，并定義合适的變量值:

body.sunrise {
  --background-color: #fff;
  --text-color: #333;
}

body.sunset {
  --background-color: #333;
  --text-color: #fff;
}           

複制

使用這些變量:

html,
body {
  background: var(--background-color);
  color: var(--text-color);
}           

複制

現在切換body元素的類名到sunrise或sunse，CSS變量會疊層應用到所有選擇器.

Javascript API

我覺得這是CSS變量最好的部分 —— CSS變量可以通過Javascript API來擷取和設定。SCSS/Less這些預處理器的變量可做不到(部分預處理器已支援編譯到到CSS變量)。

通過

getPropertyValue

方法來擷取變量:

getComputedStyle(document.documentElement).getPropertyValue('--color')           

複制

如果要擷取具體元素的的變量值, 先通過

querySelector

擷取元素：

getComputedStyle(document.querySelector('h1')).getPropertyValue('--color')           

複制

通過

style.setProperty

來設定變量值：

document.documentElement.style.setProperty('--color', 'red')           

複制

設定具體元素的變量值:

document.querySelector('h1').style.setProperty('--color', 'blue')           

複制

這個API提供了一個簡潔的方式來使用CSS變量.

幾天前, 我通過David K的XState DEMO接觸到了這個使用場景: 當使用者滑鼠拖拽時, 通過CSS變量來确定選擇框的定位(基于滑鼠的開始位置和目前位置):

.selectbox {
  left: calc(var(--mouse-x1));
  top: calc(var(--mouse-y1));
  width: calc((var(--mouse-x2) - var(--mouse-x1)));
  height: calc((var(--mouse-y2) - var(--mouse-y1)));

  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid currentColor;
  position: absolute;
  transition: opacity 0.3s ease-in-out;
}           

複制

在滑鼠事件處理器中更新CSS變量：

document.documentElement.style.setProperty(
  '--mouse-x1',
  ctx.selectArea.x1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y1',
  ctx.selectArea.y1 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-x2',
  ctx.selectArea.x2 + 'px',
)
document.documentElement.style.setProperty(
  '--mouse-y2',
  ctx.selectArea.y2 + 'px',
)           

複制

最後

如果你像我一樣覺得CSS變量沒有用，或者壓根不知道它的存在，我希望這篇文章可以為你開啟一扇門，來探索它的使用場景。

Javascript API讓我踩了不少坑，但是它确實讓我開了眼界，我期待未來能夠更多使用和了解它們。

譯者注:

本文并非完全照搬原文，即意譯. 另外女朋友也給我校驗過了，確定大體沒有搞錯?

因為筆者自己原創的文章閱讀量比較慘淡，是以筆者近期會嘗試翻譯一些文章，學習這些文章是怎麼寫的，也積攢點人氣，以便後面原創文章有更多閱讀量

擴充

• 使用CSS變量
• Caniuse: CSS Variables (Custom Properties)

Please enable JavaScript to view the comments powered by Disqus.