shzl_sass

themes 定义公共的变量
- assist.scss 常量属性
- color.scss 颜色变量
- default.scss 全局变量
mixins 定义公共的方法
- bem.scss bem 形式类名方式
- common.scss 公共方法
core 输出全局的样式
- globals.scss 定义全局变量的方法
- reset.scss 输出 reset 样式
- flex.scss 输出 flex 布局
- layout.scss 输出全局变量

命名规范

全局命名以 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>

对齐

flex 单个属性类以 g-(属性名首字母)-(属性值首字母) 命名

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-13 | 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-(方向)?-(值/变量)

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

img 大小 g-img-(值)

| 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 | 所有文本换行 |

其他

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

zp_sass

准则

文件目录

命名规范

使用方法

样式输出