创建主题
最后更新于：2022-04-01 22:20:50
# 创建主题
扩展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; }
}
```
';