abps-ui v0.0.7

开发用 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