Less

学习如何使用 Less 修改 UIkit 的样式并创建您自己的主题。

当您使用 Less 源代码安装 UIkit时，您可以编译它并添加自己的自定义主题。 Less 是 UIkit 样式使用的语言。 这使您可以在构建过程中包含自定义项，而不是手动覆盖大量 CSS 规则。

如何构建

Less 源文件允许您自定义 UIkit。 为了在您的网站上使用自定义版本，您需要将 Less 源代码编译成 CSS。 基本上，您有两个选择：设置您自己的构建过程或使用 UIkit 中包含的构建脚本。

使用您自己的构建过程

要将 UIkit 包含在项目的构建工作流程中，您需要将核心 UIkit 样式（uikit.less）或带有默认主题的 UIkit（uikit.theme.less）导入到您项目自己的 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 目录的索引并从下拉菜单中选择您的主题即可。

创建 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 的 Mixins，它们钩接到 UIkit 源代码中预定义的选择器并应用其他属性。 选择器无需在所有文档中重复，全局更改也可以更容易地进行。

首先，通过查看组件的 Less 文件来找到您想要扩展的规则，例如/src/less/components/card.less中的 Card 组件。

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

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

然后，通过在您自己的 Less 文件（例如在/custom/my-theme.less中）使用钩子来注入额外的 CSS。

// 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 组件生成 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中列出的正确导入顺序。