Q&A

Kayo edited this page Nov 30, 2016 · 6 revisions

为什么采用原生 Sass 和 Compass?

项目初期有考虑过使用 NodeJs 版本的 Sass 和 Compass 代替原生版本,这样可以减少环境配置。但当项目的 SCSS 文件量开始增多时,Nodejs 版本的编译速度明显要逊色于原生版本,另外 Compass 的 NodeJs 版本并非由官方所出,目前也有一段较长时间没有更新,综合考虑下决定使用原生版本的 Sass 和 Compass。

QMUI Sass 配置表和公共组件如何帮忙开发者快速搭建项目基础 UI?

QMUI Sass 配置表是很多 Sass 变量的合集,分别由 CSS Reset,Common CSS,Component 三个部分的 Sass 代码所使用。因此修改这些变量的值可以快速地修改到对应的 UI 表现,例如 Common CSS 中的链接色、全局字体大小,各种细分颜色(黑色、灰色),以及6个基础组件(按钮、输入框、对话框、下拉菜单、遮罩层、选项卡)的表现,由于这些 Sass 代码中绝大部分的内容已经由 QMUI 预先写好,开发者只需要修改对应的配置变量即可快速地修改 UI 表现。

另外6个组件除了配置表所控制的基础样式外,还会自动生成6个 _scss 文件,以项目前缀(由开发者在使用 QMUI Web 创建项目时输入)为开头建立了基础的组件模板,模板中预先写好了常用的 UI 样式(例如下面是按钮组件的预留样式),按实际需要修改数值即可定制组件。

/* .dm_btn */
.dm_btn {
  @include gradient_vertical_threeColor(#fff, #ebebeb, #f3f3f3, 0%, 90%, 100%);
  border-radius: 4px;
  /* line-height 的偏移值依赖于不同字体 */
  line-height: $btn_lineHeight + 2;
  line-height: $btn_lineHeight + 1 \9\0;
  _line-height: $btn_lineHeight + 4;

  &:focus {
    border-color: #0074bc;
  }
  &:active,
  &_Active {
    @include box_shadow(inset 0 1px 2px rgba(0,0,0,0.2));
    border-color: #7e7e7e;
    background: #F3F3F3;
    @include gradient_vertical(#ebebeb, #f3f3f3);
  }
  &:disabled,
  &_Disabled {
    background: #ececec;
    filter: none;
    border-color: #c3c3c3;
    color: #a8a8a8!important;
    box-shadow: none;
  }
}

遇到环境配置问题?

QMUI Web 的运行依赖于 gulp,Sass,Compass,Node.js(gulp 需要依赖)以及 Ruby(Sass 和 Compass 需要依赖),以上工具和环境除 Node.js 必须使用 4.0 以上版本外,其他工具都无具体版本要求,但建议都使用最新官方稳定版运行 QMUI Web。