abps-ui

开发用 scss 样式集

依赖 : sass sass-loader

npm i -D sass sass-loader

基础

• 基础字号: 12

---

颜色表

_setting.scss => $color

---

背景 & 字体

背景

bg-[color/rgb] [√]

bg-red => background-color: red

字体

fc-[color/rgb] [√]

fc-orange => color: orange

fs-[0-50] 字体大小 [√]

fs-5 => font-size: 5px

fw-[1-9 * 100] 字体粗细 [√]

fw-100 => font-weight: 100
400 = normal !default
700 = bold

op-[0-10] 透明度 [√]

op-5 => opacity: 0.5

---

布局

flex [√]

全写为布局 缩写为排列

flex- 布局
    r 反向
    c 居中
    rc 反向居中
f- 排列方式
    b between
    a around
    s start
    e end
    c center
f-[1-10]
    f-1 => flex: 1

w-[0-100] & h-[0-100] 长宽 [√]

w-100 => width: 100%

p- & m- [√]

n : 范围0~100
t: top => mt => margin-top => mt-5 => margin-top: 5px

[rel/fix/abs] [√]

abs => position: absolute

[t/r/b/l]-[0-100] [√] 配合绝对定位

t-0 => top: 0px

[inline/block] [√]

 inline => display: inline-block
 block => display: block

---

边框

b-[1-3]-[color/rgb] [√]

* b-1-white => border: 1px solid white

b-[0-20 & 50] 边框倒角 [√]

br-10 => border-radius: 10px
br-50 => border-radius: 50%

---

图标

icon-[1-50 * 2] [√]

---

鼠标样式

cursor-[pointer/move/text/wait] [√]

cursor-pointer => cursor: pointer