业务背景

• 项目多了,人多了之后
• 统一公共样式
  • 可以节约很多开发时间
  • 也可以避免效果不统一的问题

抽离原则

• 根据统一的ui规范抽离基础样式,比如颜色,字号,间距
• 抽离业务中常用样式方法,比如断行,阴影

抽离方法

• 文件命名参考bootstrap
• 属性命名参考emmet

目录结构

_background.scss

/**
*基础背景样式
 */
// 渐变色
// $from 起始颜色   $to 终止颜色   $degree  渐变角度
// 角度选择参考
// 90deg 从左到右 （默认值）
// 270deg 从右到左
// 0deg 从下到上
// 180deg 从上到下
@mixin linear-gradient($from, $to, $degree: 90deg){
  background-color: $to;
  background-image: linear-gradient($degree, $from, $to);
}

_border.scss

/**
*基础边框样式
 */

// 小圆角，用于按钮
$bdrs-large: 10;
// 大圆角，用于按钮
$bdrs-small: 4;
// 默认分割线
// 内容分割线
$bd-base: 1px solid $bdc-base;
// 组件分割线
$bd-comp: 1px solid $bdc-comp;

_colors.scss

/**
* 基础颜色样式
 */

// 主题色
// 一个网站只有一个主题色，不同的网站需要修改
$c-theme: #F05B28;
$white: #FFF;
$black: #000;

// 文字色
// 所有网站通用的文字颜色
$c-base: #333; // 主文字颜色，用于页面标题/重要信息
$c-gray: #666; // 副文字颜色，用于常规信息/辅助信息/次要信息
$c-light: #999; // 副文字颜色，用于常规信息/辅助信息/次要信息
$c-muted: #CCC; // 暗文字色，用于暗文字/失效文字

// 背景色
// 所有网站通用的背景颜色
$bgc-base: #F5F5F5; // 页面背景色，用于页面背景/默认图片背景/小标签背景
$bgc-comp: #F8F8F8; // 组件背景色，用于卡片/控件/按下背景

// 边框色
// 所有网站通用的边框颜色
$bdc-base: #EEE; // 内容分割线色，用于内容/列表分割线
$bdc-comp: #DDD; // 组件分割线色，用于弹框/功能/按钮分割线

_display.scss

/**
*基础显示样式
 */

// flex 水平
@mixin flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

// flex 垂直
@mixin flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

// table 居中 （行高偏上兼容）
@mixin d-table {
  display: table;
  vertical-align: middle;
  text-align: center;

  > * {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
}

@mixin lh-hack($fz) {
  width: 200%;
  font-size: px2vw($fz);
  transform-origin: left center;
  transform: scale(.5);
}

_float.scss

// 清除浮动
@mixin clearfix {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

_font.scss

/**
*基础字体样式
 */

// 字体大小
// 所有网站统一使用这些大小
$fz-xl: 18; // 大标题字号，用于顶部导航标题
$fz-lg: 16; // 小标题字号，用于正文标题，着重显示文字
$fz-md: 14; // 正文字号，用于内容文本
$fz-sm: 12; // 提示字号，用于备注/菜单分割/标签
$fz-xs: 10;

_function.scss

/**
*基础方法
 */
$design-width: 375;
// px单位转换为upx
@function px2upx($num) {
  @return $num + upx;
}
// px单位转换为vw
@function px2vw($num) {
  @return $num / ($design-width / 100) + vw;
}

_position.scss

/**
*基础位置样式
 */

// 定位层级
$z-dropdown: 1000 !default;
$z-sticky: 1020 !default;
$z-fixed: 1030 !default;
$z-modal-backdrop: 1040 !default;
$z-modal: 1050 !default;
$z-popover: 1060 !default;
$z-tooltip: 1070 !default;


// 悬浮
@mixin fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $z-fixed;
}

@mixin fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-fixed;
}

@mixin sticky-top {
  @supports (position: sticky) {
    position: sticky;
    top: 0;
    z-index: $z-sticky;
  }
}

_size.scss

/**
*基础大小样式
 */
$page-width: 1190px; // 页面主体内容最大宽度
$max-width: 768px; // 移动端宽度临界值

// 主容器水平方向padding
$section-px: 16;
// 内容块容器间距，底部margin
$section-mb: 12;
// 状态栏高度
$status-bar-h: 20;
// 顶部导航高度
$nav-bar-h: 44;
// 底部菜单高度
$menu-bar-h: 49;

// 基础混合样式
// 宽度、高度100%
@mixin wh100 {
  width: 100%;
  height: 100%;
}

_text.scss

// 文本超出宽度显示省略号
// $rows 行数,默认1行
@mixin text-truncate($rows: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  @if $rows == 1 {
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $rows;
    -webkit-box-orient: vertical;
  }
}

_index.scss

/**
 *
 * zmn-app常用样式方法
 *
 */
// 基础方法
@import "_function";
// 颜色
@import "_colors";
// 位置
@import "_position";
// 显示
@import "_display";
// 大小
@import "_size";
// 间距
//@import "_spacing";
// 文字
@import "_font";
// 边框
@import "_border";
// 背景
@import "_background";
// 其他（css3 等）