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 文件找到您要扩展的规则，例如 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; }
}

禁用反色组件

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