Less

# Less

<p class="uk-text-lead">了解如何使用Less修改UIkit样式并创建自己的主题。</p>

当你 [安装](installation.md) 带有 Less 源码的 UIkit，你可以将其编译以及添加你自己的自定义主题。UIkit 的样式是用[Less](http://lesscss.org/) 编写的。它允许你在构建过程中引入自定义的样式，不用手动覆盖许多CSS规则。


***

## How to build-如何构建

Less源代码允许您自定义UIkit。要在您的网站上使用自定义版本，您需要将Less编译为CSS。有两种方法可供您使用：设置自己的构建过程或使用UIkit中包含的构建脚本。

### 使用您自己的构建过程

要将 UIkit 引入到你的项目的构建流程中，, 您需要将核心UIkit样式 (`uikit.less`) 或包含默认主题 (`uikit.theme.less`) 的UIkit 导入自己项目的Less文件中。然后使用您喜欢的方式来编译这个主要的Less文件。如果不知道如何编译Less，请阅读 [Less官方文档](http://lesscss.org/usage/) 。

```less
// 导入UIkit默认主题（或只有核心样式的UIkit.less）
@import "node_modules/uikit/src/less/uikit.theme.less";

// 您的自定义代码在这里，例如MIXIN，变量。
// 有关详细信息，请参见下面的“如何创建主题”。
```

### 使用现成的构建过程

如果要更改UIkit的样式，可以使用其构建过程来创建不同主题的CSS版本，然后在你的项目中使用。这样你就不需要自己设置的构建过程。

要在构建过程中引入你自己的 Less 主题，需要创建一个`/custom` 目录来包含所有自定义主题。

**注意** 这个 `/custom` 文件夹已经列入到 `.gitignore`, 中了，它会避免将你的自定义文件推送到 UIkit 仓库。你还可以将 `/custom` 目录设置为你自己的 Git 仓库。这样你的主题文件就拥有了版本控制，不会再受到 UIkit 文件的影响。

创建文件 `/custom/my-theme.less` (或其他任何文件名)并引入 UIkit 核心样式(`uikit.less`) 或带有默认主题的 (`uikit.theme.less`)。

```less
// 导入UIkit默认主题（或仅包含核心样式的uikit.less）
@import "../src/less/uikit.theme.less";

// 您的自定义代码位于此处，例如 mixins，变量。
// 有关更多信息，请参见下面的“如何创建主题”。
```

运行yarn命令`compile`，将UIkit和自定义主题编译成CSS。

```sh
# 运行一次以安装所有依赖项
yarn install

# 编译所有源文件，包括主题
yarn compile

# 监视文件并在文件每次更改时自动进行编译
yarn watch
```

监视文件并在文件每次更改时自动进行编译 `/dist/css` 文件夹中。

**注意** 自定义主题在测试文件中也可以使用, 只需要在通过浏览器访问 `/tests` 目录， 并在下拉菜单中选择你的主题就可以了。

***

## Create a UIkit theme-创建一个UIkit主题

当你创建了一个用于放置你自己的 LESS 代码的文件，你就可以开始以你的方式来做 UIkit 主题了。如果你从未使用过 LESS，请查看[语言特性](http://lesscss.org/features/)。在使用 UIKit 的 LESS 源码时，我们有一些建议。

### 使用变量

只需覆盖已经声明的变量的值，就能进行大量的自定义。您可以在框架的Less文件中找到每个组件的所有变量，并在你的主题中覆盖它们。

首先，在UIkit源码中找到想要更改的Less变量。例如，全局链接颜色在这个`/src/less/components/variables.less`文件中定义为:

```less
// 默认值
@global-link-color: #4091D2;
```

然后，在你自己的文件中覆写默认值，添加一个自定义的数值，比如在`/custom/my-theme.less`中:

```less
// 新值
@global-link-color: #DA7D02;
```

编译后的 CSS 就是你的自定义值了。但不仅仅是全局的链接颜色改变了。许多用到`@global-*` 变量来推算自身颜色的组件都会被随之改变。这样，只需更改一些全局变量即可快速创建一个UIkit主题。

### 使用钩子

为了避免开销大的选择器，我们使用[Less](http://lesscss.org)中的Mixins，它可以从UIkit源挂钩到预定义的选择器，并应用其他属性。 选择器不必在所有文档中都重复，并且可以更轻松地进行全局更改。

首先，查阅组件的 LESS 文件，例如Card（卡片）组件`/src/less/components/card.less`找到要扩展的规则：

```less
// CSS规则
.uk-card {
    position: relative;
    box-sizing: border-box;

    // mixin允许添加新的声明
    .hook-card;
}
```

然后，通过在自己的 LESS 文件中使用钩子来注入额外的 CSS，比如在 `/custom/my-theme.less`中:

```less
// mixin添加新的声明
.hook-card() { color: #000; }
```

### 杂项挂钩

如果没有可用的变量和钩子，你还可以自己创建选择器。为此，可以使用_.hook-card-misc_挂钩并将选择器写入其中。这会将新选择器排序到已编译CSS文件的正确位置。只需将以下行添加到您自己的Less文件中，例如`/custom/my-theme.less`:

```less
// misc mixin
.hook-card-misc() {

    // 新规则
    .uk-card a { color: #f00; }
}
```

### 禁用反向组件

反向组件包括额外的风格来实现灵活的反向行为。如果您的项目不需要这些样式，那么可以在编译Less时将其忽略。这可以使已经编译的CSS的文件体积更小。可以搜索包含 `color-mode` (例如`@card-primary-color-mode`), 把他们设置为 `none`.

要完全禁用反样式，请设置:

```less
@inverse-global-color-mode: none;
```

您还可以为特定组件禁用反向模式:

```less
// Card
@card-primary-color-mode: none;
@card-secondary-color-mode: none;

// Navbar
@navbar-color-mode: none;

// Off-canvas
@offcanvas-bar-color-mode: none;

// Overlay
@overlay-primary-color-mode: none;

// Section
@section-primary-color-mode: none;
@section-secondary-color-mode: none;

// Tile
@tile-primary-color-mode: none;
@tile-secondary-color-mode: none;
```

## How to structure your theme-如何构建你的主题

在上面的示例中，我们将所有自定义规则直接添加到 `/custom/my-theme.less`里面。当你修改了少量的变量，你感到满意，这是很不错。然而，为了更大范围地定制主题，我们只推荐使用此文件作为面向 LESS 编译器的入口。你应该在一个子目录中为每个组件的独立文件更好地对它们的规则进行排序。这与默认的 UIkit 主题 `/src/less/uikit.theme.less`的架构方式是一样的。

**注意** 该示例假定您在 UIkit 项目的 `/custom` 目录中构建主题。如果您设置了自己的构建过程，则可以调整这些路径。

```html
custom/

    <!-- Less编译器的入口文件 -->
    my-theme.less

    <!-- 具有单个Less文件的文件夹 -->
    my-theme/

        <!-- 导入此文件夹中的所有组件 -->
        _import.less

        <!-- 每个自定义组件一个文件 -->
        accordion.less
        alert.less
        ...
```

Less编译器的入口点 `/custom/my-theme.less`:

```less
// Core
@import "../../src/less/uikit.less";

// Theme
@import "my-theme/_import.less";
```

您的主题文件夹有一个导入所有独立组件自定义项的文件 `custom/my-theme/_import.less`:

```less
@import "accordion.less";
@import "alert.less";
// ...
```


**注意** 使用此设置，您可以删除不使用的组件的import语句。这可以减小css的体积。只要确保保留 [src/less/components/\_import.less](https://github.com/uikit/uikit/blob/develop/src/less/components/_import.less)中列出的正确导入顺序即可。