Less 和 Sass 文件

一个独立的 Bower UIkit 仓库包含所有发行文件,包括 Less 和 Sass。

UIkit 的优点在于,您可以轻松地将其源文件集成到您的项目中,以便保留您自定义的项目工作流程来构建资源,并使用您首选的 CSS 预处理器。

UIkit 使用包管理器 Bower 来加载资源。因此,UIkit 会自动生成发行文件到一个独立的 Bower UIkit 仓库中。它包含来自 UIkit 及其组件的所有 CSS、Less、SCSS 和 JavaScript 文件。

获取最新的 UIkit 发行版本

  1. 使用 Bower 安装 bower install uikit
  2. 或者从 Github 获取软件包

您会发现 Less 文件和 Sass 文件并排存放在各自的文件夹中

/uikit
    less/
        uikit.less
        ...
    scss/
        uikit-mixins.scss
        uikit.scss
        ...

在您的项目中嵌入 Less

使用 Less 非常简单。只需在您的主要 Less 文件顶部包含 UIkit 和其他组件,并通过利用 UIkit 的钩子并覆盖其变量来开始自定义。

示例

@import "uikit/less/uikit.less";
@import "uikit/less/components/autocomplete.less";

// your custom code goes here, e.g. mixins, variables

在您的项目中嵌入 Sass

由于 Sass 解析代码的方式,需要您先包含 uikit-mixins.scss,然后添加您的自定义设置(钩子、变量),最后添加 UIkit 和其他组件。

示例

@import "uikit/scss/uikit-mixins.scss";

// your custom code goes here, e.g. mixins, variables

@import "uikit/scss/uikit.scss";
@import "uikit/scss/components/autocomplete.scss";