1. 准则
2. 文件目录
3. 命名规范
4. 使用方式
5. 样式输出
以flex布局为主，栅格布局、固定布局、流体布局，绝对定位布局，浮动布局等为辅的一套css样式表。
常见的flex布局和flex单个属性类。
辅助布局类。
+ functions 定义公共的函数
+ mixins 定义公共的方法
- bem.scss BEM规范
- common.scss 公共方法
+ outputs 输出实体的样式
- flex.scss 输出flex布局
- ...
+ scripts 用于兼容
- ...
+ variables 常量
- default.scss 默认值
- colors.scss 颜色的具体数值
- theme.scss 主题控制
- index.scss 输出浏览器可用的（含outputs全部）
- index.normalize.scss 比上面多一个normalize.css
- index.normalize-only.scss 仅打包normalize.css
- index.rpx.scss 生成微信可用的rpx，且2倍屏（scale: 2）
- index.rem.scss 生成移动端可用rem，且2倍屏（scale: 2）
- index.rem-part.scss 仅含（边距，行高，字体），2倍屏（scale: 2）, 前缀rg-。用于浏览器混入rem开发相关
- ... 在需要引用公共变量的时候，一般里面可以去改变全局的颜色，边距，单位等变量。
@import " ../themes/default" // 公共变量 在需要引用公共方法的时候，可以去调用全局定义的方法，例如：@include commonScale(100px)。
@import " ../mixins/common" // 公共方法 在需要引用动画方法的时候，定义了例如： @keyframes animate-fadeIn 淡入等动画。
@import " ../mixins/animate" // 公共动画
值
备注
取值
color-default
-
#f5f6fa
color-highlight
-
#5495f6
color-info
-
#0177de
color-success
-
#00a854
color-error
-
#f04134
color-warning
-
#ffbf00
background-color-default
-
#f5f6fa
background-color-highlight
-
#5495f6
border-radius-default
-
8px
border-shadow-default
-
0 0 8px 0 rgba(0, 0, 0, .1)
border-shadow-default-top
-
0 -2px 10px 0 rgba(0, 0, 0, .08)
line-height-default
-
16px
line-height-limit
-
32px
border-color-default
-
#c9c9c9
font-size-default
-
14px
font-size-large
-
16px
scrollbar-track-bg-color
-
rgba(0, 0, 0, 0)
scrollbar-thumb-bg-color
-
rgba(0, 0, 0, .2)
scrollbar-track-box-shadow
-
inset 0 0 10px rgba(0, 0, 0, 0)
所有用主题的样式用themefix
可以用过$theme-merge-data增加，类型map
class
备注
关键代码
.g-flex
flex布局
display: flex
.g-flex-holy
圣杯布局
-
.g-flex-cc
水平垂直居中
justify-content: center; align-items: center
.g-flex-ac
垂直居中
align-items: center
.g-col
占一位
flex: 1
.g-col-2
占两位
flex: 2
.g-1of1
铺满
flex: 0 0 100%
.g-1of2
占50%
flex: 0 0 50%
.g-1of3
占1/3
flex: 0 0 33.33333333%
.g-2of3
占2/3
flex: 0 0 66.66666666%
.g-1of4
占1/4
flex: 0 0 25%
.g-3of4
占3/4
flex: 0 0 75%
.g-1of5
占1/5
flex: 0 0 20%
.g-2of5
占2/5
flex: 0 0 40%
.g-3of5
占3/5
flex: 0 0 60%
.g-4of5
占4/5
flex: 0 0 80%
单个属性类 以g-(属性名首字母)-(属性值首字母) 命名
class
备注
关键代码
.g-fd-c
主轴为垂直方向，起点在上
flex-direction: column
.g-fd-cr
主轴为垂直方向，倒序
flex-direction: column-reverse
.g-fd-r
主轴为水平方向，起点在左
flex-direction: row
.g-fd-rr
主轴为水平方向，起点在右
flex-direction: row-reverse
.g-fw-w
换行，第一行在上方。
flex-wrap: wrap
.g-fw-wr
换行，第一行在下方。
flex-wrap: wrap-reverse
.g-fw-n
不换行
flex-wrap: nowrap
.g-jc-fs
位于容器的开头
justify-content: flex-start
.g-jc-fe
位于容器的结尾
justify-content: flex-end
.g-jc-c
位于容器的中心
justify-content: center
.g-jc-sb
两端对齐, 间隔相等
justify-content: space-between
.g-jc-sa
间隔相等
justify-content: space-around
.g-ai-fs
侧轴方向, 位于容器的开头, 主轴方向排列
align-items: flex-start
.g-ai-fe
侧轴方向, 位于容器的结尾, 主轴方向排列
align-items: flex-end
.g-ai-c
侧轴方向, 位于容器的中心, 主轴方向排列
align-items: center
.g-ai-b
侧轴方向, 位于容器的基线上, 主轴方向排列
align-items: baseline
.g-ai-s
侧轴方向, 元素被拉伸以适应容器, 主轴方向排列
align-items: stretch
.g-ac-fs
侧轴方向, 元素位于容器的开头, 侧轴方向排列
align-content: flex-start
.g-ac-fe
侧轴方向,元素位于容器的结尾, 侧轴方向排列
align-content: flex-end
.g-ac-sb
两端对齐, 间隔相等, 侧轴方向排列
align-content: space-between
.g-ac-sa
间隔相等, 侧轴方向排列
align-content: space-around
.g-ac-s
元素被拉伸以适应容器, 剩余空间被所有行平分, 以扩大它们的侧轴尺寸
align-content: stretch
.g-as-fs
flex子项在侧轴方向上的对齐方式: 位于容器的开头
align-self: flex-start
.g-as-fe
flex子项在侧轴方向上的对齐方式: 位于容器的结尾
align-self: flex-end
.g-as-a
默认值，继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"
align-self: auto
.g-as-b
元素位于容器的基线上
align-self: baseline
.g-as-c
flex子项在侧轴方向上的对齐方式: 元素位于容器的中心
align-self: center
.g-as-s
元素被拉伸以适应容器
align-self: stretch
class
备注
.g-reset
用户初始化元素的类
.g-unset
避免富文本被其他第三方初始化
颜色 g-(c|bg)-(颜色／变量) 颜色效果可在MarkDown编辑器中查看
class
备注
颜色效果
.g-(c,bg)-blue-dark
#0b76fe
.g-(c,bg)-blue-mid
#16a3ff
.g-(c,bg)-blue-light
#6ab4ff
.g-(c,bg)-yellow-dark
#f2c300
.g-(c,bg)-yellow-mid
#ffd00d
.g-(c,bg)-yellow-light
#ffd31c
.g-(c,bg)-orange-dark
#ef3528
.g-(c,bg)-orange-mid
#fa6f60
.g-(c,bg)-orange-light
#fc9780
.g-(c,bg)-gray-dark
#edeef0
.g-(c,bg)-gray-mid
#f5f6f7
.g-(c,bg)-gray-light
#f7f8fa
.g-(c,bg)-black-dark
#2e3136
.g-(c,bg)-black-mid
#636770
.g-(c,bg)-black-light
#9c9fa6
.g-(c,bg)-purple-dark
#8b61f3
.g-(c,bg)-purple-mid
#a48efc
.g-(c,bg)-purple-light
#cca3ff
.g-(c,bg)-black
#000
.g-(c,bg)-white
#fff
.g-(c,bg)-444
#444
.g-(c,bg)-67
#676767
.g-(c,bg)-f2
#f2f2f2
.g-(c,bg)-f8
#f8f8f8
.g-(c,bg)-ef
#efefef
.g-(c,bg)-cd
#cdcdcd
.g-(c,bg)-e8
#e8e8e8
.g-(c,bg)-d9
#d9d9d9
.g-(c,bg)-f4
#f4f4f4
.g-(c,bg)-f9
#f9f9f9
.g-(c,bg)-000
#000000
.g-(c,bg)-333
#333333
.g-(c,bg)-51
#515151
.g-(c,bg)-666
#666666
.g-(c,bg)-999
#999999
.g-(c,bg)-aaa
#aaaaaa
.g-(c,bg)-bbb
#bbbbbb
.g-(c,bg)-bd
#bdbdbd
.g-(c,bg)-info
#0177de
.g-(c,bg)-success
#00a854
.g-(c,bg)-error
#f04134
.g-(c,bg)-warn
#ffbf00
取值范围：10, 12, 13, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 48, 50, 60, 70, 80, 90, 100;
可以用过$font-size-list-join-data增加，类型list
class
备注
.g-fs-*
font-size: *
取值范围：16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 60, 72, 80, 88, 120;
可以用过$line-height-list-join-data增加，类型list
class
备注
.g-lh-*
line-height: *
.g-lh-one
行高32px, 高度64px
.g-lh-two
行高32px, 高度32px
取值范围：5, 8, 10, 12, 13, 15, 16, 18, 20, 21, 24, 25, 30, 32, 48, 56, 60;
可以用过$padding-list-join-data增加，类型list
class
备注
.g-pd-*
padding: *
.g-pd-tb-*
padding-top: *; padding-bottom: *
.g-pd-lr-*
padding-left: *; padding-right: *
.g-pd-t-*
padding-top: *
.g-pd-l-*
padding-left: *
.g-pd-b-*
padding-bottom: *
.g-pd-r-*
padding-right: *
取值范围：5, 8, 10, 12, 13, 15, 16, 18, 20, 21, 24, 25, 30, 32, 48, 56, 60;
可以用过$margin-list-join-data增加，类型list
class
备注
.g-m-*
margin: *
.g-m-tb-*
margin-top: *; margin-bottom: *
.g-m-lr-*
margin-left: *; margin-right: *
.g-m-t-*
margin-top: *
.g-m-l-*
margin-left: *
.g-m-b-*
margin-bottom: *
.g-m-r-*
margin-right: *
取值范围：256, 150, 128, 100, 96, 64, 56, 40, 32, 24
可以用过$image-size-list-join-data增加，类型list
class
备注
.g-img-*
长宽*
.g-imgc-*
圆形，长宽*
.g-imgr-*
圆角4px，长宽*
class
备注
.g-row
.g-w-(number)
12>= number >=1
.g-fw-(number)
12>= number >=1 float:left;
.g-clearfix
清除浮动
.g-fr
右浮
.g-fl
左浮
TODO
class
备注
.g-fixed
固定定位
.g-relative
绝对定位
.g-absolute
相对定位
.g-absolute-full
相对铺满
.g-fixed-full
固定铺满
取值范围： 2, 4, 6, 8, 10, 12, 14, 16, 18, 20;
可以用过$border-radius-list-join-data增加，类型list
class
备注
.g-b
1像素边框
.g-bb
1像素下(border-bottom)边框
.g-br
1像素右(border-right)边框
.g-bl
1像素左(border-left)边框
.g-bt
1像素上(border-top)边框
.g-br-circle
border-radius: 100%;
.g-br-default
默认圆角 (8px)
.g-br-{number}
圆角 ({number}px)
class
备注
.g-tc
居中
.g-tl
居左
.g-tr
居右
.g-td-lh
删除线
.g-td-ul
下划线
.g-nowrap
不换行
.g-break
字母数字换行
.g-break-all
所有文本换行
.g-line-one
单行省略
.g-line-one
两行省略
class
备注
.g-bs
边框阴影
.g-bs-t
顶部阴影
class
备注
.g-h-full
height: 100vh;
.g-disabled
禁用事件
.g-unanimated
禁用动画
.g-show, .g-block, .g-dp-b
display: block
.g-dp-n, .g-hide, .g-none
displacy: none
.g-dp-i, .g-inline
display: inline
.g-dp-ib, .g-inline-block
display: inline-block
.g-pointer
cursor: pointer
.g-divide
分割线
.g-dot
5像素的点
.g-of-h
overflow: hidden
.g-operable
点击文字按钮样式
.g-disabled
无点击事件
.g-scroller
滚动条
目前计划是组件库内处理