Less

了解如何使用 Less 修改 UIkit 的样式并创建自己的主题。

当你通过 Less 源码安装 UIkit后，就可以编译它并添加自己的自定义主题。Less 是 UIkit 样式所使用的语言。它让你可以把定制内容纳入构建流程，而不必手动覆盖大量 CSS 规则。

如何构建

Less 源文件让你可以定制 UIkit。要在网站上使用定制后的版本，需要把 Less 源码编译成 CSS。基本上有两种方式可选：搭建你自己的构建流程，或使用 UIkit 内置的构建脚本。

使用你自己的构建流程

要把 UIkit 纳入项目的构建工作流，你需要在项目自己的 Less 文件中导入 UIkit 核心样式（uikit.less），或导入带默认主题的 UIkit（uikit.theme.less）。然后以任意你喜欢的方式编译这个主 Less 文件。如果不确定如何编译 Less，请阅读 Less 官方文档。

// Import UIkit default theme (or uikit.less with only core styles)
@import "node_modules/uikit/src/less/uikit.theme.less";

// Your custom code goes here, e.g. mixins, variables.
// See "how to create a theme" below for more info.

使用内置构建流程

如果你想改变 UIkit 的样式，可以使用它的构建流程生成一个不同主题的 CSS 版本，然后再将其引入项目。这样你就不必搭建自己的构建流程。

要把自己的 Less 主题纳入构建流程，请创建 /custom 目录，用于存放你所有的自定义主题。

注意 /custom 文件夹已列入 .gitignore，这样可以避免你的自定义文件被推送到 UIkit 仓库。你也可以把 /custom 目录作为自己的 Git 仓库。这样你的主题文件就处于版本控制之下，而不会干扰 UIkit 的文件。

创建一个 /custom/my-theme.less 文件（或其他任意名称），并导入 UIkit 核心样式（uikit.less）或带默认主题的 UIkit（uikit.theme.less）。

// Import UIkit default theme (or uikit.less with only core styles)
@import "../src/less/uikit.theme.less";

// Your custom code goes here, e.g. mixins, variables.
// See "how to create a theme" below for more info.

要把 UIkit 和你的自定义主题编译成 CSS，请运行 pnpm 任务 compile 。

# Run once to install all dependencies
pnpm install

# Compile all source files including your theme
pnpm compile

# Watch files and compile automatically every time a file changes
pnpm watch

生成的 CSS 文件将位于 /dist/css 文件夹中。

注意 自定义主题在测试文件中也可用，只需在浏览器中打开 /tests 目录的首页，然后从 Dropdown 菜单中选择你的主题。

创建 UIkit 主题

当准备好放置自定义 Less 代码的文件后，你就可以按自己想要的方式为 UIkit 定制主题了。如果你以前从未用过 Less，请查看语言特性。使用 UIkit 的 Less 源码时，我们有几点建议。

使用变量

通过简单地覆盖已声明变量的值，就能完成大量定制工作。你可以在框架中各组件对应的 Less 文件里找到该组件的所有变量，并在主题中覆盖它们。

首先，在 UIkit 源码中找到你想修改的 Less 变量。例如，全局链接颜色定义在 /src/less/components/variables.less 中：

// default value
@global-link-color: #4091D2;

然后，在你自己的文件中设置自定义值来覆盖默认值，例如在 /custom/my-theme.less 中：

// new value
@global-link-color: #DA7D02;

编译后的 CSS 就会使用你的自定义值。而且不止全局链接颜色发生了变化。许多组件会利用 @global-* 变量推导自己的颜色，并只做轻微调整。这样一来，你只需修改一些全局变量，就能快速创建主题。

使用钩子

为避免选择器冗余，我们使用 Less 的 Mixin，它们会钩入 UIkit 源码中预定义的选择器并应用额外的属性。选择器不必在各个文档中重复，全局改动也容易得多。

首先，浏览组件的 Less 文件，找到你想扩展的规则，例如 Card 组件的 /src/less/components/card.less：

// CSS rule
.uk-card {
    position: relative;
    box-sizing: border-box;

    // mixin to allow adding new declarations
    .hook-card();
}

然后，在你自己的 Less 文件中使用该钩子注入额外的 CSS，例如在 /custom/my-theme.less 中：

// mixin to add new declaration
.hook-card() { color: #000; }

其他钩子

如果某处既没有可用的变量也没有可用的钩子，你还可以创建自己的选择器。为此，请使用 .hook-card-misc 钩子，并在其中编写你的选择器。这会把你的新选择器排到编译后 CSS 文件的正确位置。只需在你自己的 Less 文件中添加以下几行，例如添加到 /custom/my-theme.less：

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

    // new rule
    .uk-card a { color: #f00; }
}

禁用 Inverse 组件

Inverse 组件会生成 CSS，为所有组件按相应的背景色配色。如果你的项目不需要反转内容的颜色，可以在编译 Less 时禁用它。这样编译后 CSS 的文件体积会更小。为此，请查找包含 color-mode 的 Less 变量（例如 @card-primary-color-mode），并将它们设置为 none。

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

@inverse-global-color-mode: none;

你也可以针对特定组件禁用反色模式。以下是所有组件的完整列表。

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

// Dropbar
@dropbar-color-mode: none;

// Dropdown
@dropdown-color-mode: none;

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

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

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

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

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

如何组织你的主题

在上面的示例中，我们把所有自定义规则直接写进了 /custom/my-theme.less。当你只改动少量变量、对其余部分满意时，这样做完全没有问题。不过，对于规模较大的定制，我们建议只把这个文件当作 Less 编译器的入口。你应该把所有规则按组件拆成单个文件，放到一个子文件夹中。这与默认主题 /src/less/uikit.theme.less 中的结构相同。

注意 该示例假定你在完整 UIkit 项目的 /custom 目录中构建主题。如果你搭建了自己的构建流程，可以相应调整这些路径。

custom/

    <!-- entry file for Less compiler -->
    my-theme.less

    <!-- folder with single Less files -->
    my-theme/

        <!-- imports all components in this folder -->
        _import.less

        <!-- one file per customized component -->
        accordion.less
        alert.less
        …

Less 编译器的入口 /custom/my-theme.less：

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

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

你的主题文件夹中有一个文件，用于导入所有单个组件的定制内容，即 custom/my-theme/_import.less：

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

注意 采用这种结构，你可以删除未使用组件的导入语句。这样会生成更小的 CSS。只需确保保持 src/less/components/\_import.less 中列出的正确导入顺序。