# 創建主題 擴展UIkit并添加你自己的獨一無二的主題。 ## 如何開始 默認地，UIkit帶有一個非常基礎的主題。如果要修改它的樣式，你不需要編輯任何核心框架文件。相反，你可以通過創建一個自定義主題來擴展UIKit。這樣便允許你輕松地更新UIkit的核心文件。我們甚至提供了一些靈巧的主題以幫助你入門。要創建自己的主題，請按照下面步驟操作：（這里有一篇文章可以參考下：[uikit框架開發前期配置及定制主題方法](https://segmentfault.com/a/1190000004283813) ） ### 1\. 創建主題目錄 下載或克隆UIKit，安裝 Node 和 Gulp 。最后，在這里創建你的主題文件夾 `/custom/THEME-NAME`。如果 `/custom` 不存在，那就創建它！ 注意 `/custom` 文件夾設置為 git ignore，這樣可以防止你的自定義文件被推入到UIKit庫中。如果你在使用克隆版 UIkit's git 倉庫， 它將是一次很好的將 `/custom` 作為你自己的git倉庫的實踐。這樣，你的主題文件的版本控制將不會受到UIkit文件的干擾。 ### 2\. 添加你的主題 在 `/custom/THEME-NAME` 文件夾中創建 `uikit.less` 文件，并添加 `@import "../../src/uikit.less";` 規則來訪問核心框架中的所有Less文件并采用它的基礎樣式。好了，你可以從零開始添加你自己的主題了。 注意 為了能立即開始你的工作，我們提供了默認、漸變和扁平三個主題。所有默認文件都已經引入了，你同樣可以找到所有主題文件以及與它們相關的鉤子。所以你需要做的是復制文件夾到 `/custom` 目錄中，并重命名。 ### 3\. 定制和測試 在你的 UIkit 文件夾中運行 gulp 的 `indexthemes`?指令。現在，剛剛新建的主題就將會自動出現在定制工具和測試文件中。 ### 4\. 構建你的主題 你可以在定制工具中生成你的主題的 CSS。如果你想使用 gulp 指令來做這事，運行 `gulp dist -t THEME-NAME`就行了。生成的文件被放置在 `dist/` 文件夾中。 * * * ## 最佳主題實踐 設計你的主題有多種不同的方法，我們推薦以下的工作流程。 ### 1\. 使用變量 首先要做的是自定義已聲明的變量的值。你可以在核心框架的Less文件中找到所有組件的變量，在你的主題中重寫它們。 ### Example `/src/core/button/button.less` ``` // 默認值 @button-height: 30px; ``` `/custom/THEME-NAME/button.less` ``` // 新的值 @button-height: 35px; ``` ### 2\. 使用鉤子 為了防止架空選擇器，我們使用 [Less](http://lesscss.org) 的混合（Mixins）方法與 UIkit 源碼中預定義的選擇器進行掛鉤，并運用其附加屬性。選擇器不必在所有文件中重復填寫，全局的修改變得更容易了。 ### Example `/src/core/panel/panel.less` ``` // CSS 規則 .uk-panel { background: @background; // mixin 混合增加新的聲明 .hook-panel; } ``` `/custom/THEME-NAME/panel.less` ``` // mixin 混合增加新的聲明 .hook-panel() { color: #fff; } ``` ### 3\. 混雜的鉤子/Miscellaneous hooks 如果沒有變量也沒有鉤子可用，當然你也可以自行創建一個你自己的選擇器。為此，請使用 _.hook-panel-misc_ 鉤子并將你的選擇器寫入其中。這樣將會把你的新選擇器整合到編譯后的CSS文件的合適位置。 ### Example `/custom/THEME-NAME/panel.less` ``` // misc mixin .hook-panel-misc() { // 新的規則 .uk-panel a { color: #f00; } } ```