源碼分析：如何定製Semantic-UI

SemanticUI簡介

我來如今就任的這家公司以前，只使用過Bootstrap，並不知道SemanticUI。後來接手瞭如今的項目以後才知道有這麼個框架。相比於盛行的Bootstrap，SemanticUI有它的值得使用的地方。

• SemanticUI 像它的名字同樣。更加語義化。
• 默認的樣式比Bootstrap好看不少，更加鮮明活潑。我的感受。
• 類名比Bootstrap短。而且更加離散。嵌套層級也少不少。

可是它有一個很讓人頭疼的缺點，就是對開發者的種種不友好。

• 文檔不夠詳細，不少模塊的使用方法都是寥寥數語，或者放的地方很深。須要依靠你本身的編程經驗去猜。
• 模塊定製並不像Bootstrap那樣能夠直接勾選本身須要的模塊而後打包。在SemanticUI中，你必須在npm安裝過程當中選擇要安裝哪些模塊。
• yarn不友好。如上一條，npm中能夠在過程當中選擇安裝哪些模塊。可是SemanticUI的安裝腳本不被yarn所識別。必須yarn add semantic-ui --ignore-scripts才能夠。添加了ignore-scriptes選項天然也就喪失了定製化的功能。因爲我如今用的框架是RoR，默認使用的前端管理工具就是yarn，因此感受很難受。

以上只是隨便說了說SemanticUI與Bootstrap的區別，並不全面。由於這不是本文主要內容。

定製SemanticUI

有時候咱們但願全局地定製SemanticUI。好比SemanticUI的默認字體大小爲14px。而咱們的項目默認大小爲12px。在我接手項目的時候，諸如此類與框架提供樣式相悖的樣式都是直接在一個init.scss文件中進行覆蓋來重置。感受很醜，也會形成代碼的冗餘。

可是因爲剛接手時並不瞭解SemanticUI，並且我身爲一個前端程序員入職時竟然直接讓我上手開發Rails應用，手忙腳亂的我全身心都在學Rails根本沒時間考慮這個問題。而且，在SemanticUI 官網中不能很容易地找到定製的方法（實際上是有的，可是東一塊西一塊很難系統地貫穿起來）。因此我也就照着原來的樣子作了這個項目一年。

init.scss中有些樣式難以找到原來定義的地方，覆蓋很是困難。chrome-dev-tool看穿了纔會在一個六七行的選擇器後面找到這個樣式的定義，而後加一下權重進行覆蓋 —— 就是再寫一個六七行甚至七八行的選擇器。不想再說了，痛苦。

最近老闆發話了，要作前端的大改版。我終於有機會也有時間進行大重構了。過程可能會跟撕痂同樣痛苦，但結果必定會跟撕完了同樣爽。

如何入手

我是在SemanticUI的Github的src文件夾中看到了這個README.md才知道怎麼作的。

裏面講了一些如何重置SemanticUI默認樣式，構建適合本身項目的SemanticUI的方法。我一眼就看到了底下的一些關鍵詞reset，font size。驚呆了，原來在這。因而細細地讀了起來。

這篇README講了什麼呢？

1. 如何構建SemanticUI。直接gulp install。
2. 能夠監控文件實時構建。gulp watch。
3. 配置文件的位置。
4. 工做流。使用構建工具構建你專屬的SemanticUI並在項目中直接使用構建完成的定製包。
5. 主題化。
6. 定製化。

咱們要作的是定製本身的主題，本身的UI規範（字體大小，字體顏色，行高，一級二級三級主題色等等...）。因此咱們能夠先從5和6入手。

主題與樣式的層級關係

主題的定義文件有必定的層級關係：

1. SemanticUI的默認主題。就是什麼也不設置一路回車而後直接構建直接使用的主題。
2. SemanticUI提供的可選的預置的主題包。好比amazon主題或者material主題。
3. 組件自有的主題。好比全局主題色是#f5f5f5，可是primary按鈕組件本身的主題色是藍色，則以藍色爲準。
4. 你本身定製的主題。

某個元素應用的主題，是以上面四條倒序查找的。你本身定製的主題優先，沒定製則尋找可選主題。若是沒進行任何設置，則使用默認主題。

目錄結構

以上的主題都是在哪裏定義的呢？咱們如何修改它？文中提到了目錄結構。

• src/definitions 文件夾中定義了每一個組件使用的js和css。
• src/themes 中存放了SemanticUI提供的全部可用的主題。在咱們構建時能夠選擇一個來使用。默認主題也在這裏面。
• src/site 你的專有主題。

源碼驗證

咱們先打開src/semantic.less文件。在文件的最頂部有這樣的語句：

& { @import "definitions/globals/reset"; }
複製代碼

這裏導入了一個reset文件到當前的semantic.less。咱們來看一下reset中都有什麼。首先，reset文件的頂部定義了兩個變量，一個叫作@type一個叫作@element。

@type    : 'global';
@element : 'reset';
複製代碼

緊接着導入了主題配置文件：@import (multiple) '../../theme.config';。在這個配置文件中咱們又看到了以下兩個變量：

/* Global */
@site       : 'default';
@reset      : 'default';

...... ......

/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder   : 'site/';
複製代碼

註釋寫的很清楚了，是文件夾路徑變量。分別是主題包路徑和覆蓋文件的路徑。這兩個路徑在哪裏被用到了呢？繼續看這個文件，在最底部，引入了一個theme.less文件。該文件中有這樣一段代碼：

/*--------------------
   Site Variables
---------------------*/

/* Default site.variables */
@import "@{themesFolder}/default/globals/site.variables";

/* Packaged site.variables */
@import "@{themesFolder}/@{site}/globals/site.variables";

/* Component's site.variables */ @import (optional) "@{themesFolder}/@{theme}/globals/site.variables"; /* Site theme site.variables */ @import (optional) "@{siteFolder}/globals/site.variables"; 複製代碼

註釋代表是網站變量。裏面用到了上一個文件theme.config中定義的四個變量。指向了四個路徑引入了四個文件。到這裏你應該意識到了，咱們重置樣式的地方應該就在這些地方。

請注意這四個文件的順序：

1. default網站變量。
2. 可選包網站變量。
3. 組件本身的變量。
4. 你本身定製的網站變量。

因爲CSS的特性，層級同樣的重複聲明的樣式是後蓋前。因此以上文件之後面的爲準。即，最權威的是你本身定義的樣式。這與以前所說的主題層級的加載優先級是吻合的。

回顧一下theme.config。這裏定義的變量：

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder   : 'site/';
複製代碼

咱們便知道這四個路徑都指到哪裏了。既然以咱們自定義的主題爲準，那麼咱們直接看@import (optional) "@{siteFolder}/globals/site.variables";也就是site/globals/site.variables。裏面空空如也，只有一句註釋：用戶全局變量。找到了！咱們只要在這裏重置樣式就能夠了。

定位到文件了，該如何書寫呢？面對空空如也的文件無從下手？一般面對這種狀況，最好的作法是看它默認的文件是怎麼寫的。

打開src/themes/default/globals/site.variables，看到下面幾個代碼片斷，你就會茅塞頓開：

@fontName          : 'Lato';

......


@emSize   : 14px;

@fontSize : 14px;
......

@primaryColor        : @blue;
@secondaryColor      : @black;

......

複製代碼

以字體大小爲例，若是咱們要更改咱們全局的字體大小，以12px爲基準。咱們回到咱們空空的site/globals/site.variables文件。添加以下代碼：

@emSize   : 12px;

@fontSize : 12px;

複製代碼

這樣咱們就完成了樣式覆蓋，使用12px做爲基準字體大小了。

觸類旁通

咱們已經會了如何定製全局的樣式。那麼一些特殊化的定製要如何完成呢？好比，全局字體大小爲12px，可是產品和UI要求了，全部的按鈕內字體都要是14px。

其實根據上面的經驗，咱們的作法仍是同樣的。

首先打開src/site/elements/button.variables。熟悉的一幕又出現了：只有一句註釋。再打開src/themes/default/elements/button.variables又看到了使人興奮的片斷（別想歪）：

/* Button */
@verticalMargin: 0em;
@horizontalMargin: 0.25em;
@backgroundColor: #E0E1E2;
@backgroundImage: none;
@background: @backgroundColor @backgroundImage;
@lineHeight: 1em;
複製代碼

咋整？回到那個空文件進行變量覆蓋呀~就這麼簡單。

最後一步

已經對默認的樣式進行覆蓋了，是時候打包咱們本身的SemanticUI了！

gulp clean
gulp build
複製代碼

打包成功後使用時會發現，樣式乖乖的都按規定走了。不再用寫七八行的選擇器了。爽。再見了init.scss。

討論

有的人說了，既然都動了源碼，幹嗎不直接在src/themes/default/elements/button.variables改了算了。有兩個緣由不這麼作：

1. 不講道理的緣由：官方說了你最好在本身的重置文件裏寫。
2. 由於你在本身的重置文件裏寫，知道本身重置了哪些樣式，而直接修改原來的，就啥也不知道了。

學會了這種方式之後，你就能夠基於SemanticUI進行「二次開發」，打造適合你的SemanticUI框架。

安利

醜爆手搭博客瞭解一下：http://qxchenblog.cn