Less

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

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

如何构建

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

使用您自己的构建过程

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

// 导入UIkit默认主题（或只有核心样式的UIkit.less）
	@import "node_modules/uikit/src/less/uikit.theme.less";
	
	// 您的自定义代码在这里，例如MIXIN，变量。
	// 有关详细信息，请参见下面的“如何创建主题”。

使用现成的构建过程

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

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

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

创建文件 /custom/my-theme.less (或其他任何文件名) 并引入 UIkit 核心样式 (uikit.less) 或带有默认主题的 (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.

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

# Run once to install all dependencies
	yarn install
	
	# Compile all source files including your theme
	yarn compile
	
	# Watch files and compile automatically everytime a file changes
	yarn watch

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

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

创建一个UIkit主题

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

使用变量

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

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

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

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

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

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

使用钩子

为了避免开销大的选择器，我们使用 Less, w的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; }
	}

禁用反向组件

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

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

@inverse-global-color-mode: none;

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

// 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;

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

Note T该示例假定您在 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";
	// ...

Note 使用此设置，您可以删除不使用的组件的import语句。这可以减小css的体积。只要确保保留 src/less/components/_import.less中列出的正确导入顺序即可。

UIkit3.x文档