@wya/sass

• Documents

npm install --save @wya/sass

1. 准则

2. 文件目录

3. 命名规范

4. 使用方式

5. 样式输出

• 5.1 flex
• 5.2 layout
• 5.3 柵格
• 5.4 定位
• 5.5 辅助
• 5.6 动画

准则

1. 以flex布局为主，栅格布局、固定布局、流体布局，绝对定位布局，浮动布局等为辅的一套css样式表。
2. 常见的flex布局和flex单个属性类。
3. 辅助布局类。

文件目录

• themes 定义公共的变量
  • color.scss 颜色变量
  • default.scss 全局变量
• mixins 定义公共的方法
  • animate.scss 动画
  • common.scss 公共方法
• core 输出全局的样式
  • globals.scss 定义全局变量的方法
  • reset.scss 输出reset样式
  • animate.scss 输出动画
  • flex.scss 输出flex布局
  • layout.scss 输出全局变量
  • pc pc模块样式
  • mobile 手机模块样式

命名规范

• 全局命名以 g- 开头
• 模块命名以 v- 开头
  1. 外层：以 v- 开头， v-(路由简写)-(组件模块)， 例如： v-home-header;
  2. 内层：以_ 开头， _(模块)， 例如： _tab ;
• 公共组件命名以 c- 开头
  1. 外层：以 c- 开头， c-(弹层功能)-(结构)， 例如： c-addr-header;
  2. 内层：以__ 开头， __(模块)， 例如： __tab ;

使用方法

在需要引用公共变量的时候，一般里面可以去改变全局的颜色，边距，单位等变量。

  @import "../themes/default"; // 公共变量

在需要引用公共方法的时候，可以去调用全局定义的方法，例如：@include commonScale(100px)。

  @import "../mixins/common"; // 公共方法

在需要引用动画方法的时候，定义了例如： @keyframes animate-fadeIn 淡入等动画。

  @import "../mixins/animate"; // 公共动画

样式输出

百分比布局

| class | 备注 | 关键代码 | |:-------------|:---------------|:---------------| | .g-flex | flex布局 | display: flex | | .g-col | 占一位 | flex: 1 | | .g-col-2 | 占两位 | flex: 2 | | .g-full | 铺满 | 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% |

基本网格布局

| class | 备注 | |:-------------|:---------------| |.g-flex-grid-3 | 三列 | |.g-flex-grid-4 | 四列 | |.g-flex-grid-5 | 五列 | |.g-flex-grid-6 | 六列 |

圣杯布局

| class | 备注 | |:-------------|:---------------| | .g-flex-holy | |

输入框的布局

<div class="g-flex">
	<label></label>
	<input class="g-col" />
	<button></button>
</div>

悬挂式布局

<div class="g-flex g-ai-fs">
  <img class="g-m-r" src="" alt="">
  <p class="g-col"></p>
</div>

对齐

| class | 备注 | 关键代码 | |:-------------|:---------------|:---------------| |.g-flex-cc | 水平垂直居中| justify-content: center; align-items: center | |.g-flex-ac | 垂直居中| align-items: center |

flex单个属性类 以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 |

color g-c-(颜色／变量) 颜色效果可在MarkDown编辑器中查看

| class | 备注 | 颜色效果 | |:-------------|:---------------|:---------------| |.g-c-blue-dark | #0b76fe | blue-dark | |.g-c-blue-mid | #16a3ff | blue-mid | |.g-c-blue-light | #6ab4ff | blue-light | |.g-c-yellow-dark | #f2c300 | yellow-dark | |.g-c-yellow-mid | #ffd00d | yellow-mid | |.g-c-yellow-light | #ffd31c | yellow-light | |.g-c-orange-dark | #ef3528 | orange-dark | |.g-c-orange-mid | #fa6f60 | orange-mid | |.g-c-orange-light | #fc9780 | orange-light | |.g-c-gray-dark | #edeef0 | gray-dark | |.g-c-gray-mid | #f5f6f7 | gray-mid | |.g-c-gray-light | #f7f8fa | gray-light | |.g-c-black-dark | #2e3136 | black-dark | |.g-c-black-mid | #636770 | black-mid | |.g-c-black-light | #9c9fa6 | black-light | |.g-c-purple-dark | #8b61f3 | purple-dark | |.g-c-purple-mid | #a48efc | purple-mid | |.g-c-purple-light | #cca3ff | purple-light | |.g-c-black | #000 | black | |.g-c-white | #fff | white | |.g-c-444 | #444 | 444 | |.g-c-67 | #676767 | 676767 | |.g-c-f8 | #f2f2f2 | f2f2f2 | |.g-c-f8 | #f8f8f8 | f8f8f8 | |.g-c-ef | #efefef | efefef | |.g-c-cd | #cdcdcd | cdcdcd | |.g-c-e8 | #e8e8e8 | e8e8e8 | |.g-c-d9 | #d9d9d9 | d9d9d9 | |.g-c-f4 | #f4f4f4 | f4f4f4 | |.g-c-f9 | #f9f9f9 | f9f9f9 | |.g-c-000 | #000000 | 000000 | |.g-c-333 | #333333 | 333333 | |.g-c-51 | #515151 | 515151 | |.g-c-666 | #666666 | 666666 | |.g-c-999 | #999999 | 999999 | |.g-c-aaa | #aaaaaa | aaaaaa | |.g-c-bbb | #bbbbbb | bbbbbb | |.g-c-bd | #bdbdbd | bdbdbd | |.g-c-info | #0177de | 0177de | |.g-c-success | #00a854 | 00a854 | |.g-c-error | #f04134 | f04134 | |.g-c-warn | #ffbf00 | ffbf00 |

bgColor g-bg-(颜色／变量) 颜色效果可在MarkDown编辑器中查看

| class | 备注 | 颜色效果 | |:-------------|:---------------|:---------------| |.g-bg-blue-dark | #0b76fe | | |.g-bg-blue-mid | #16a3ff | | |.g-bg-blue-light | #6ab4ff | | |.g-bg-yellow-dark | #f2c300 | | |.g-bg-yellow-mid | #ffd00d | | |.g-bg-yellow-light | #ffd31c | | |.g-bg-orange-dark | #ef3528 | | |.g-bg-orange-mid | #fa6f60 | | |.g-bg-orange-light | #fc9780 | | |.g-bg-gray-dark | #edeef0 | | |.g-bg-gray-mid | #f5f6f7 | | |.g-bg-gray-light | #f7f8fa | | |.g-bg-black-dark | #2e3136 | | |.g-bg-black-mid | #636770 | | |.g-bg-black-light | #9c9fa6 | | |.g-bg-purple-dark | #8b61f3 | | |.g-bg-purple-mid | #a48efc | | |.g-bg-purple-light | #cca3ff | | |.g-bg-black | #000 | | |.g-bg-white | #fff | | |.g-bg-444 | #444 | | |.g-bg-67 | #676767 | | |.g-bg-f2 | #f2f2f2 | | |.g-bg-f8 | #f8f8f8 | | |.g-bg-ef | #efefef | | |.g-bg-cd | #cdcdcd | | |.g-bg-e8 | #e8e8e8 | | |.g-bg-d9 | #d9d9d9 | | |.g-bg-f4 | #f4f4f4 | | |.g-bg-f9 | #f9f9f9 | | |.g-bg-000 | #000000 | | |.g-bg-333 | #333333 | | |.g-bg-51 | #515151 | | |.g-bg-666 | #666666 | | |.g-bg-999 | #999999 | | |.g-bg-aaa | #aaaaaa | | |.g-bg-bbb | #bbbbbb | | |.g-bg-bd | #bdbdbd | | |.g-bg-info | #0177de | | |.g-bg-success | #00a854 | | |.g-bg-error | #f04134 | | |.g-bg-warn | #ffbf00 | |

font-size g-fs-(字号)

| class | 备注 | |:------|:-------| |.g-fs-10| font-size: 10px | |.g-fs-12| font-size: 12px | |.g-fs-12| font-size: 13px | |.g-fs-14| font-size: 14px | |.g-fs-16| font-size: 16px | |.g-fs-18| font-size: 18px | |.g-fs-20| font-size: 20px | |.g-fs-22| font-size: 22px | |.g-fs-24| font-size: 24px | |.g-fs-26| font-size: 26px | |.g-fs-28| font-size: 28px | |.g-fs-30| font-size: 30px | |.g-fs-32| font-size: 32px | |.g-fs-34| font-size: 34px | |.g-fs-36| font-size: 36px | |.g-fs-38| font-size: 38px | |.g-fs-40| font-size: 40px | |.g-fs-48| font-size: 48px | |.g-fs-50| font-size: 50px | |.g-fs-60| font-size: 60px | |.g-fs-70| font-size: 70px | |.g-fs-80| font-size: 80px | |.g-fs-90| font-size: 90px | |.g-fs-100| font-size: 100px |

line-height g-lh-(值)

| class | 备注 | |:-------------|:---------------| |.g-lh-16| line-height: 16px | |.g-lh-18 | line-height: 18px | |.g-lh-20 | line-height: 20px | |.g-lh-22 | line-height: 22px | |.g-lh-24 | line-height: 24px | |.g-lh-26 | line-height: 26px | |.g-lh-28 | line-height: 28px | |.g-lh-30 | line-height: 30px | |.g-lh-32 | line-height: 32px | |.g-lh-34 | line-height: 34px | |.g-lh-36 | line-height: 36px | |.g-lh-38 | line-height: 38px | |.g-lh-40 | line-height: 40px | |.g-lh-42 | line-height: 42px | |.g-lh-44 | line-height: 44px | |.g-lh-60 | line-height: 60px | |.g-lh-72 | line-height: 72px | |.g-lh-80 | line-height: 80px | |.g-lh-88 | line-height: 88px | |.g-lh-120 | line-height: 120px |

padding g-pd-(方向)?-(值/变量)

| class | 备注 | |:-------------|:---------------| |.g-pd-5| padding: 5px | |.g-pd-8| padding: 8px | |.g-pd-10| padding: 10px | |.g-pd-12| padding: 12px | |.g-pd-13| padding: 13px | |.g-pd-15| padding: 15px | |.g-pd-16| padding: 16px | |.g-pd-18| padding: 18px | |.g-pd-20| padding: 20px | |.g-pd-21| padding: 21px | |.g-pd-24| padding: 24px | |.g-pd-25| padding: 25px | |.g-pd-30| padding: 30px | |.g-pd-32| padding: 32px | |.g-pd-48| padding: 48px | |.g-pd-56| padding: 56px | |.g-pd-tb-5| padding-top: 5px; padding-bottom: 5px | |.g-pd-tb-8| padding-top: 8px; padding-bottom: 8px | |.g-pd-tb-10| padding-top: 10px; padding-bottom: 10px | |.g-pd-tb-12| padding-top: 12px; padding-bottom: 12px | |.g-pd-tb-13| padding-top: 13px; padding-bottom: 13px | |.g-pd-tb-15| padding-top: 15px; padding-bottom: 15px | |.g-pd-tb-16| padding-top: 16px; padding-bottom: 16px | |.g-pd-tb-18| padding-top: 18px; padding-bottom: 18px | |.g-pd-tb-20| padding-top: 20px; padding-bottom: 20px | |.g-pd-tb-21| padding-top: 21px; padding-bottom: 21px | |.g-pd-tb-24| padding-top: 24px; padding-bottom: 24px | |.g-pd-tb-25| padding-top: 25px; padding-bottom: 25px | |.g-pd-tb-30| padding-top: 30px; padding-bottom: 30px | |.g-pd-tb-32| padding-top: 32px; padding-bottom: 32px | |.g-pd-tb-48| padding-top: 48px; padding-bottom: 48px | |.g-pd-tb-56| padding-top: 56px; padding-bottom: 56px | |.g-pd-lr-5 | padding-left: 5px; padding-right: 5px| |.g-pd-lr-8 | padding-left: 8px; padding-right: 8px| |.g-pd-lr-10 | padding-left: 10px; padding-right: 10px| |.g-pd-lr-13 | padding-left: 13px; padding-right: 13px| |.g-pd-lr-15 | padding-left: 15px; padding-right: 15px| |.g-pd-lr-16 | padding-left: 16px; padding-right: 16px| |.g-pd-lr-18 | padding-left: 18px; padding-right: 18px| |.g-pd-lr-20 | padding-left: 20px; padding-right: 20px| |.g-pd-lr-21 | padding-left: 21px; padding-right: 21px| |.g-pd-lr-24 | padding-left: 24px; padding-right: 24px| |.g-pd-lr-25 | padding-left: 25px; padding-right: 25px| |.g-pd-lr-30 | padding-left: 30px; padding-right: 30px| |.g-pd-lr-32 | padding-left: 32px; padding-right: 32px| |.g-pd-lr-48 | padding-left: 48px; padding-right: 48px| |.g-pd-lr-56 | padding-left: 56px; padding-right: 56px| |.g-pd-t-5| padding-top: 5px | |.g-pd-t-8| padding-top: 8px | |.g-pd-t-10| padding-top: 10px | |.g-pd-t-12| padding-top: 12px | |.g-pd-t-13| padding-top: 13px | |.g-pd-t-15| padding-top: 15px | |.g-pd-t-16| padding-top: 16px | |.g-pd-t-18| padding-top: 18px | |.g-pd-t-20| padding-top: 20px | |.g-pd-t-21| padding-top: 21px | |.g-pd-t-24| padding-top: 24px | |.g-pd-t-25| padding-top: 25px | |.g-pd-t-30| padding-top: 30px | |.g-pd-t-32| padding-top: 32px | |.g-pd-t-48| padding-top: 48px | |.g-pd-t-56| padding-top: 56px | |.g-pd-l-5| padding-left: 5px | |.g-pd-l-8| padding-left: 8px | |.g-pd-l-10| padding-left: 10px | |.g-pd-l-12| padding-left: 12px | |.g-pd-l-13| padding-left: 13px | |.g-pd-l-15| padding-left: 15px | |.g-pd-l-16| padding-left: 16px | |.g-pd-l-18| padding-left: 18px | |.g-pd-l-20| padding-left: 20px | |.g-pd-l-21| padding-left: 21px | |.g-pd-l-24| padding-left: 24px | |.g-pd-l-25| padding-left: 25px | |.g-pd-l-30| padding-left: 30px | |.g-pd-l-32| padding-left: 32px | |.g-pd-l-48| padding-left: 48px | |.g-pd-l-56| padding-left: 56px | |.g-pd-b-5| padding-bottom: 5px | |.g-pd-b-8| padding-bottom: 8px | |.g-pd-b-10| padding-bottom: 10px | |.g-pd-b-12| padding-bottom: 12px | |.g-pd-b-13| padding-bottom: 13px | |.g-pd-b-15| padding-bottom: 15px | |.g-pd-b-16| padding-bottom: 16px | |.g-pd-b-18| padding-bottom: 18px | |.g-pd-b-20| padding-bottom: 20px | |.g-pd-b-21| padding-bottom: 21px | |.g-pd-b-24| padding-bottom: 24px | |.g-pd-b-25| padding-bottom: 25px | |.g-pd-b-30| padding-bottom: 30px | |.g-pd-b-32| padding-bottom: 32px | |.g-pd-b-48| padding-bottom: 48px | |.g-pd-b-56| padding-bottom: 56px | |.g-pd-r-5| padding-right: 5px | |.g-pd-r-8| padding-right: 8px | |.g-pd-r-10| padding-right: 10px | |.g-pd-r-12| padding-right: 12px | |.g-pd-r-13| padding-right: 13px | |.g-pd-r-15| padding-right: 15px | |.g-pd-r-16| padding-right: 16px | |.g-pd-r-18| padding-right: 18px | |.g-pd-r-20| padding-right: 20px | |.g-pd-r-21| padding-right: 21px | |.g-pd-r-24| padding-right: 24px | |.g-pd-r-25| padding-right: 25px | |.g-pd-r-30| padding-right: 30px | |.g-pd-r-32| padding-right: 32px | |.g-pd-r-48| padding-right: 48px | |.g-pd-r-56| padding-right: 56px |

margin g-m-(方向)?-(值/变量)

| class | 备注 | |:-------------|:---------------| |.g-m-5| margin: 5px | |.g-m-8| margin: 8px | |.g-m-10| margin: 10px | |.g-m-12| margin: 12px | |.g-m-13| margin: 13px | |.g-m-15| margin: 15px | |.g-m-16| margin: 16px | |.g-m-18| margin: 18px | |.g-m-20| margin: 20px | |.g-m-21| margin: 21px | |.g-m-24| margin: 24px | |.g-m-25| margin: 25px | |.g-m-30| margin: 30px | |.g-m-32| margin: 32px | |.g-m-48| margin: 48px | |.g-m-56| margin: 56px | |.g-m-tb-5| margin-top: 5px; margin-bottom: 5px | |.g-m-tb-8| margin-top: 8px; margin-bottom: 8px | |.g-m-tb-10| margin-top: 10px; margin-bottom: 10px | |.g-m-tb-12| margin-top: 12px; margin-bottom: 12px | |.g-m-tb-13| margin-top: 13px; margin-bottom: 13px | |.g-m-tb-15| margin-top: 15px; margin-bottom: 15px | |.g-m-tb-16| margin-top: 16px; margin-bottom: 16px | |.g-m-tb-18| margin-top: 18px; margin-bottom: 18px | |.g-m-tb-20| margin-top: 20px; margin-bottom: 20px | |.g-m-tb-21| margin-top: 21px; margin-bottom: 21px | |.g-m-tb-24| margin-top: 24px; margin-bottom: 24px | |.g-m-tb-25| margin-top: 25px; margin-bottom: 25px | |.g-m-tb-30| margin-top: 30px; margin-bottom: 30px | |.g-m-tb-32| margin-top: 32px; margin-bottom: 32px | |.g-m-tb-48| margin-top: 48px; margin-bottom: 48px | |.g-m-tb-56| margin-top: 56px; margin-bottom: 56px | |.g-m-lr-5 | margin-left: 5px; margin-right: 5px| |.g-m-lr-8 | margin-left: 8px; margin-right: 8px| |.g-m-lr-10 | margin-left: 10px; margin-right: 10px| |.g-m-lr-13 | margin-left: 13px; margin-right: 13px| |.g-m-lr-15 | margin-left: 15px; margin-right: 15px| |.g-m-lr-16 | margin-left: 16px; margin-right: 16px| |.g-m-lr-18 | margin-left: 18px; margin-right: 18px| |.g-m-lr-20 | margin-left: 20px; margin-right: 20px| |.g-m-lr-21 | margin-left: 21px; margin-right: 21px| |.g-m-lr-24 | margin-left: 24px; margin-right: 24px| |.g-m-lr-25 | margin-left: 25px; margin-right: 25px| |.g-m-lr-30 | margin-left: 30px; margin-right: 30px| |.g-m-lr-32 | margin-left: 32px; margin-right: 32px| |.g-m-lr-48 | margin-left: 48px; margin-right: 48px| |.g-m-lr-56 | margin-left: 56px; margin-right: 56px| |.g-m-t-5| margin-top: 5px | |.g-m-t-8| margin-top: 8px | |.g-m-t-10| margin-top: 10px | |.g-m-t-12| margin-top: 12px | |.g-m-t-13| margin-top: 13px | |.g-m-t-15| margin-top: 15px | |.g-m-t-16| margin-top: 16px | |.g-m-t-18| margin-top: 18px | |.g-m-t-20| margin-top: 20px | |.g-m-t-21| margin-top: 21px | |.g-m-t-24| margin-top: 24px | |.g-m-t-25| margin-top: 25px | |.g-m-t-30| margin-top: 30px | |.g-m-t-32| margin-top: 32px | |.g-m-t-48| margin-top: 48px | |.g-m-t-56| margin-top: 56px | |.g-m-l-5| margin-left: 5px | |.g-m-l-8| margin-left: 8px | |.g-m-l-10| margin-left: 10px | |.g-m-l-12| margin-left: 12px | |.g-m-l-13| margin-left: 13px | |.g-m-l-15| margin-left: 15px | |.g-m-l-16| margin-left: 16px | |.g-m-l-18| margin-left: 18px | |.g-m-l-20| margin-left: 20px | |.g-m-l-21| margin-left: 21px | |.g-m-l-24| margin-left: 24px | |.g-m-l-25| margin-left: 25px | |.g-m-l-30| margin-left: 30px | |.g-m-l-32| margin-left: 32px | |.g-m-l-48| margin-left: 48px | |.g-m-l-56| margin-left: 56px | |.g-m-b-5| margin-bottom: 5px | |.g-m-b-8| margin-bottom: 8px | |.g-m-b-10| margin-bottom: 10px | |.g-m-b-12| margin-bottom: 12px | |.g-m-b-13| margin-bottom: 13px | |.g-m-b-15| margin-bottom: 15px | |.g-m-b-16| margin-bottom: 16px | |.g-m-b-18| margin-bottom: 18px | |.g-m-b-20| margin-bottom: 20px | |.g-m-b-21| margin-bottom: 21px | |.g-m-b-24| margin-bottom: 24px | |.g-m-b-25| margin-bottom: 25px | |.g-m-b-30| margin-bottom: 30px | |.g-m-b-32| margin-bottom: 32px | |.g-m-b-48| margin-bottom: 48px | |.g-m-b-56| margin-bottom: 56px | |.g-m-r-5| margin-right: 5px | |.g-m-r-8| margin-right: 8px | |.g-m-r-10| margin-right: 10px | |.g-m-r-12| margin-right: 12px | |.g-m-r-13| margin-right: 13px | |.g-m-r-15| margin-right: 15px | |.g-m-r-16| margin-right: 16px | |.g-m-r-18| margin-right: 18px | |.g-m-r-20| margin-right: 20px | |.g-m-r-21| margin-right: 21px | |.g-m-r-24| margin-right: 24px | |.g-m-r-25| margin-right: 25px | |.g-m-r-30| margin-right: 30px | |.g-m-r-32| margin-right: 32px | |.g-m-r-48| margin-right: 48px | |.g-m-r-56| margin-right: 56px |

img大小 g-img-(值)

| class | 备注 | |:-------------|:---------------| |.g-img-24| 长宽24px | |.g-img-32| 长宽32px | |.g-img-40| 长宽40px | |.g-img-56| 长宽56px | |.g-img-64| 长宽64px | |.g-imgc-24| 圆形，长宽24px | |.g-imgc-32| 圆形，长宽32px | |.g-imgc-40| 圆形，长宽40px | |.g-imgc-56| 圆形，长宽56px | |.g-imgc-64| 圆形，长宽64px | |.g-imgr-24| 圆角4px，长宽24px | |.g-imgr-32| 圆角4px，长宽32px | |.g-imgr-40| 圆角4px，长宽40px | |.g-imgr-56| 圆角4px，长宽56px | |.g-imgr-64| 圆角4px，长宽64px |

| class | 备注 | |:-------------|:---------------| |.g-row| | |.g-w-(number)| 12>= number >=1 |
|.g-fw-(number)| 12>= number >=1 float:left;|

| class | 备注 | |:-------------|:---------------| |.g-fixed| 固定定位 | |.g-relative| 绝对定位|
|.g-absolute| 相对定位|

| class | 备注 | |:-------------|:---------------| |.g-clearfix| 清除浮动 | |.g-fr | 右浮|
|.g-fl | 左浮|

1像素边框

| class | 备注 | |:-------------|:---------------| |.g-b| 1像素边框 | |.g-bb| 1像素下(border-bottom)边框 | |.g-br | 1像素右(border-right)边框 |
|.g-bl| 1像素左(border-left)边框 | |.g-bt | 1像素上(border-top)边框 |

文本

| class | 备注 | |:-------------|:---------------| |.g-tc| 居中| |.g-tl| 居左| |.g-tr| 居右| |.g-td-lh| 删除线| |.g-td-ul| 下划线| |.g-nowrap| 不换行| |.g-nobreak| 字母数字换行| |.g-break| 字母数字换行| |.g-allbreak| 所有文本换行|

其他

| class | 备注 | |:-------------|:---------------| |.g-h-full| height: 100vh; | |.g-br-circle| border-radius: 100%; | |.g-br-sem| 默认圆角 (8px) | |.g-bs| 边框阴影| |.g-bs-t| 顶部阴影| |.g-disabled| 禁用事件 | |.g-noanimate| 禁用动画| |.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-oneline| 单行省略 | |.g-twoline| 两行省略 | |.g-one-lh| 行高32px, 高度64px | |.g-two-lh| 行高32px, 高度32px | |.g-operation| 点击文字按钮样式 | |.g-disabled| 无点击事件 |

动画请使用vc-transtion or rc-transtion