之前皮膚開發了一個版本，抽是抽出來了，但是變量只抽出了幾個顏色，沒什么價值（上個版本開發過程），

這次我又進行了一次迭代，現在是一個較成熟的版本了。整體理一下思路，可以總結為3步走和2層架構：

3步走

第1步：抽取出皮膚相關樣式

皮膚是樣式的子集，想要做皮膚的管理，首先要把涉及到的樣式都抽取出來，這里只涉及到了 登錄頁、考勤頁、頂部菜單 3個部分。抽出來后放在assets/skin下。

也是分成了3個文件管理

第二步： 抽取其中的變量

單抽出樣式來肯定不夠，要做配置化，需要從樣式中抽出變化的值作為變量來管理，并且統一命名。

如圖，也是對應3個section的3個文件。

命名方式是 sectionName-blockName{-status}-cssName

抽取出變量之后的less文件如下：

這樣以后就只需要改動配置文件，而不需要修改樣式文件了。

第三步，抽取公共變量

配置中有很多同樣的值，比如重復的顏色、重復的基礎路徑等。這些常量寫了很多次，萬一修改要修改n個地方，所以，我把這些散落的魔法值收集起來作為枚舉值統一維護，使得配置變得更加的方便可控。

我抽取出了以下變量：

這里的顏色的命名我是按照色相和亮度來命名的，按照色相分為 紅、橙、黃、紅橙等，然后再加上深淺、亮暗的區分。雖然不是那么準確，但是能夠簡單區分了。

通過以上3個步驟，皮膚的可配置化就完成了。以后如果要開發一套新的皮膚，一般只需要改動配置就可以了。不過如果新皮膚有別的樣式的更改，還是需要去修改樣式文件，然后擴充配置變量的。隨著皮膚開發的越來越多，配置也會越來越完善。

2層架構

經過上面3個步驟我們抽取出了皮膚樣式和皮膚相關的配置變量，其實皮膚的架構也就分了這兩層。

總結

皮膚是全部樣式的一個子集，做到可配置需要3步：

確定好范圍之后，把樣式抽取出來單獨維護， 2.從中抽取抽變量來配置

把一些顏色等常量值做成枚舉的形式

整體的皮膚架構就分為皮膚樣式和皮膚配置兩層，架構圖見上文。

代碼鏈接

總結

以上是生活随笔為你收集整理的皮肤可配置化：变量、样式分离的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。