wya-sass

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 |

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 | |

font-size g-fs-(字号)

| class | 备注 | |:------|:-------| |.g-fs-10| font-size: 10px | |.g-fs-12| font-size: 12px | |.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-10| padding: 10px | |.g-pd-15| padding: 15px | |.g-pd-20| padding: 20px | |.g-pd-25| padding: 25px | |.g-pd-30| padding: 30px | |.g-pd-tb-5| padding-top: 5px; padding-bottom: 5px | |.g-pd-tb-10| padding-top: 10px; padding-bottom: 10px | |.g-pd-tb-15| padding-top: 15px; padding-bottom: 15px | |.g-pd-tb-20| padding-top: 20px; padding-bottom: 20px | |.g-pd-tb-25| padding-top: 25px; padding-bottom: 25px | |.g-pd-tb-30| padding-top: 30px; padding-bottom: 30px | |.g-pd-lr-5 | padding-left: 5px; padding-right: 5px| |.g-pd-lr-10 | padding-left: 10px; padding-right: 10px| |.g-pd-lr-15 | padding-left: 15px; padding-right: 15px| |.g-pd-lr-20 | padding-left: 20px; padding-right: 20px| |.g-pd-lr-25 | padding-left: 25px; padding-right: 25px| |.g-pd-lr-30 | padding-left: 30px; padding-right: 30px| |.g-pd-t-5| padding-top: 5px | |.g-pd-t-10| padding-top: 10px | |.g-pd-t-15| padding-top: 15px | |.g-pd-t-20| padding-top: 20px | |.g-pd-t-25| padding-top: 25px | |.g-pd-t-30| padding-top: 30px | |.g-pd-l-5| padding-left: 5px | |.g-pd-l-10| padding-left: 10px | |.g-pd-l-15| padding-left: 15px | |.g-pd-l-20| padding-left: 20px | |.g-pd-l-25| padding-left: 25px | |.g-pd-l-30| padding-left: 30px | |.g-pd-b-5| padding-bottom: 5px | |.g-pd-b-10| padding-bottom: 10px | |.g-pd-b-15| padding-bottom: 15px | |.g-pd-b-20| padding-bottom: 20px | |.g-pd-b-25| padding-bottom: 25px | |.g-pd-b-30| padding-bottom: 30px | |.g-pd-r-5| padding-right: 5px | |.g-pd-r-10| padding-right: 10px | |.g-pd-r-15| padding-right: 15px | |.g-pd-r-20| padding-right: 20px | |.g-pd-r-25| padding-right: 25px | |.g-pd-r-30| padding-right: 30px |

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

| class | 备注 | |:-------------|:---------------| |.g-m-5| margin: 5px | |.g-m-10| margin: 10px | |.g-m-15| margin: 15px | |.g-m-20| margin: 20px | |.g-m-25| margin: 25px | |.g-m-30| margin: 30px | |.g-m-tb-5| margin-top: 5px; margin-bottom: 5px | |.g-m-tb-10| margin-top: 10px; margin-bottom: 10px | |.g-m-tb-15| margin-top: 15px; margin-bottom: 15px | |.g-m-tb-20| margin-top: 20px; margin-bottom: 20px | |.g-m-tb-25| margin-top: 25px; margin-bottom: 25px | |.g-m-tb-30| margin-top: 30px; margin-bottom: 30px | |.g-m-lr-5 | margin-left: 5px; margin-right: 5px| |.g-m-lr-10 | margin-left: 10px; margin-right: 10px| |.g-m-lr-15 | margin-left: 15px; margin-right: 15px| |.g-m-lr-20 | margin-left: 20px; margin-right: 20px| |.g-m-lr-25 | margin-left: 25px; margin-right: 25px| |.g-m-lr-30 | margin-left: 30px; margin-right: 30px| |.g-m-t-5| margin-top: 5px | |.g-m-t-10| margin-top: 10px | |.g-m-t-15| margin-top: 15px | |.g-m-t-20| margin-top: 20px | |.g-m-t-25| margin-top: 25px | |.g-m-t-30| margin-top: 30px | |.g-m-l-5| margin-left: 5px | |.g-m-l-10| margin-left: 10px | |.g-m-l-15| margin-left: 15px | |.g-m-l-20| margin-left: 20px | |.g-m-l-25| margin-left: 25px | |.g-m-l-30| margin-left: 30px | |.g-m-b-5| margin-bottom: 5px | |.g-m-b-10| margin-bottom: 10px | |.g-m-b-15| margin-bottom: 15px | |.g-m-b-20| margin-bottom: 20px | |.g-m-b-25| margin-bottom: 25px | |.g-m-b-30| margin-bottom: 30px | |.g-m-r-5| margin-right: 5px | |.g-m-r-10| margin-right: 10px | |.g-m-r-15| margin-right: 15px | |.g-m-r-20| margin-right: 20px | |.g-m-r-25| margin-right: 25px | |.g-m-r-30| margin-right: 30px |

img大小 g-img-(值)

| class | 备注 | |:-------------|:---------------| |.g-img-40| 长宽40px | |.g-img-46 | 长宽46px | |.g-img-50 | 长宽50px | |.g-img-60 | 长宽60px | |.g-img-70 | 长宽70px | |.g-img-76 | 长宽76px | |.g-img-80 | 长宽80px | |.g-img-100 | 长宽100px | |.g-img-120 | 长宽120px | |.g-img-140 | 长宽140px | |.g-img-160 | 长宽160px |

| 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| 字母数字不换行|

其他

| class | 备注 | |:-------------|:---------------| |.g-h-full| height: 100vh; | |.g-br-circle| border-radius: 100%; | |.g-br-sem| 默认圆角 (8px) | |.g-bs| 边框阴影| |.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| 无点击事件 |

| class | 备注 | |:-------------|:---------------| |.g-popup-down| 向下弹出 height：50% | |.g-popup-up| 向上弹出 height：50% | |.g-popup-left| 向左弹出 height：50% | |.g-popup-right| 向右弹出 height：50% | |.g-bg-mask| 遮罩层| |.g-modal| 居中弹窗 |