Kayo edited this page Aug 21, 2017 · 7 revisions

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。

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.