-
Notifications
You must be signed in to change notification settings - Fork 237
Q&A
Kayo edited this page Aug 21, 2017
·
7 revisions
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。