返回介绍

使用 Less & Sass

发布于 2019-05-26 16:28:16 字数 1165 浏览 1104 评论 0 收藏 0

一个涵盖包括 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";

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文