# 创建主题 扩展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; } } ```