使用 Less & Sass - UIkit 中文文档

Less & Sass 文件

一个涵盖包括 LESS 和 Sass 在内所有分发文件的独立 UIkit Bower 仓库。

UIkit 的伟大之处在于,你可以很轻松地将它的源文件集成到你的项目中,并能保障在你的自定义工作流能使用你最喜爱的CSS预处理器来构建资源(assets)。

UIkit 使用 Bower 包管理器来加载资源(assets)。因此 UIkit 自动生成分发文件到独立的 Bower UIkit repository。它包含所有来自 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 的钩子和覆写 UIkit 变量,就能开始定制了。

Example

@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 和附加组件的文件。

Example

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

// 此处填入你的代码,比如: mixins, variables

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