Q&A

为什么采用原生 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;
  }
}