[譯] CSS 變數和 JavaScript 讓應用支援動態主題

子非發表於2019-02-28

原文地址：Dynamic App Themes with CSS Variables and JavaScript ?

原文作者：Mike Wilcox

譯文出自：掘金翻譯計劃

本文永久連結：github.com/xitu/gold-m…

譯者：CoolRice

校對者：Yifan Xiang, CoderMing

大家好！在這篇文章中我準備講一講我在 Web 應用中建立動態主題載入器的方法。我會講一點關於 React、Create-React-App、Portals、Sass、CSS 變數還有其它有意思的東西。如果你對此感興趣，請繼續閱讀！

我正在開發的應用是一個音樂應用程式，它是 Spotify 的迷你克隆版。前端程式碼基於 Create-React-App。新增了 node-sass-chokidar 使得 CRA 支援 Sass。

整合 Sass

給 CRA 新增 Sass 並不困難。我僅僅需要安裝 node-sass-chokidar 然後在 package.json 檔案新增一些指令碼，這些指令碼告訴 node-sass-chokidar 怎樣去編譯 Sass 檔案並且在開發時能夠監視檔案變化以再次編譯。include-path 標誌讓 node-sass-chokidar 知道去哪尋找通過 @import 引入的 Sass 檔案。這裡有一份完整的選項清單。

整合 Sass 之後，我接下來要做的是定義一個顏色列表，它會成為應用程式的基本模板。這個列表用不著非常詳細，只需要有基本模板所需最少的顏色就行。接下來，我定義那些使用顏色的部分，併為它們提供了描述性的名字。有了這些變數，它們就可以應用於應用程式的各種元件，這些元件會明確應用的主題基調。

Sass 顏色變數

Sass 主題變數

在這裡，可以看到我已經定義了一組基本顏色變數，並將它們應用於預設的 Sass 主題變數。這些主題變數會貫穿整個程式碼庫的樣式表，以將調色盤應用到程式並賦予它生命！

下面，我需要一種簡單的方法來動態更新這些變數。這個方法就是使用 CSS 變數。

CSS 變數的瀏覽器支援

CSS 變數是一個較新的瀏覽器規範並且幾乎 100% 瀏覽器支援。考慮到我正在構建的應用是一個原型程式，所以我沒有過多考慮支援舊瀏覽器。話雖如此，還是有些人推出了一些IE 墊片。

就我的用例來說，我需要將 Sass 變數同步到 CSS 變數。為此，我選擇了使用 css-vars 包。

css-vars

按照上面 README 中描述的那樣，我大致上對我的應用做了類似的更改……

用 Sass 新增 CSS 變數支援

準備到位後，我可以在我的樣式表中使用 CSS 變數，而不是使用 Sass 變數。上面的重要一行是 $css-vars-use-native: true;，它告訴 css-vars 包編譯的 CSS 應該編譯為真正的 CSS 變數。這對於以後需要動態更新它們非常重要。

下一步要在應用中新增一個 “主題選擇器”。對此，我希望能有多一點樂趣並選擇新增了一個隱藏的選單。這個隱藏的選單有一點復活節彩蛋的感覺並且更加有趣。我並不太擔心正確的使用者體驗 — 將來我可能會把這個選單視覺化。不過現在，讓我們為應用程式新增一個祕密選單，當使用者按下鍵盤上的某個組合鍵時會顯示這個選單。