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

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

3步走

第1步：抽取出皮膚相關(guān)樣式

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

也是分成了3個文件管理

第二步： 抽取其中的變量

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

如圖，也是對應(yīng)3個section的3個文件。

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

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

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

第三步，抽取公共變量

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

我抽取出了以下變量：

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

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

2層架構(gòu)

經(jīng)過上面3個步驟我們抽取出了皮膚樣式和皮膚相關(guān)的配置變量，其實皮膚的架構(gòu)也就分了這兩層。

總結(jié)

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

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

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

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

代碼鏈接

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。