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