shortcut.css
一个通用的样式类集合, margin, padding, border, width, height, font ...
npm install @senntyou/shortcut.css --save
-
px
单位:import '@senntyou/shortcut.css'
-
rem
单位(屏宽 375):import '@senntyou/shortcut.css/lib/shortcut.375rem.css'
-
rem
单位(屏宽 750):import '@senntyou/shortcut.css/lib/shortcut.750rem.css'
-
vw
单位(屏宽 375):import '@senntyou/shortcut.css/lib/shortcut.375vw.css'
-
vw
单位(屏宽 750):import '@senntyou/shortcut.css/lib/shortcut.750vw.css'
-
rpx
单位(屏宽 750):import '@senntyou/shortcut.css/lib/shortcut.750rpx.css'
类名规则
- 用
-
链接属性与值, 如果属性中已有-
, 则保留:mg-l-10 -> margin-left: 10px
- 用 2 个辅音字母代替长单词, 用 1 个辅音字母代替短单词:
mg-l -> margin-left
- 如果值是整数, 则保留:
mg-10 -> margin: 10px
- 如果值是字符串, 则保留:
mg-auto -> margin: auto
- 如果值是小数, 则用
-
分割开:l-hg-1-1 -> line-height: 1.1
- 用
-
连接特殊单位:50-pc -> 50%
简化类名规则
在一般的命名规则之上,另加一套简化的命名,比如
margin-top: 20px => mg-t-20 => mgt-20
margin-left: 10% => mg-l-10-pc => mgl-10p
- 类名中只保留一个
-
,属性名与属性值中的-
都不保留 - 对于
0.x
的小数,直接去掉.
;而1.x, 2.x
等大于 1 的小数,则用横线代替.
- 使用简化单位
特殊单位
pc -> %
-
p -> %
(简化)
缩写
-
margin
:-
margin
:mg
-
margin-left
:mg-l
-
margin-top
:mg-t
-
margin-right
:mg-r
-
margin-bottom
:mg-b
-
-
padding
:-
padding
:pd
-
padding-left
:pd-l
-
padding-top
:pd-t
-
padding-right
:pd-r
-
padding-bottom
:pd-b
-
-
border
:-
border
:bd
-
border-left
:bd-l
-
border-top
:bd-t
-
border-right
:bd-r
-
border-bottom
:bd-b
-
-
border-radius
:-
border-radius
:bd-rd
-
border-top-left-radius
:bd-rd-t-l
-
border-top-right-radius
:bd-rd-t-r
-
border-bottom-left-radius
:bd-rd-b-l
-
border-bottom-right-radius
:bd-rd-b-r
-
-
line-height
:l-hg
-
font-size
:f-s
-
font-weight
:f-wg
-
position
:-
left
:l
-
right
:r
-
top
:t
-
bottom
:b
-
-
width
:wd
-
height
:hg
-
float
:fl
-
overflow
:of
-
cursor
:cs
-
position
:ps
-
display
:dp
-
flex
:fx
-
text-align
:t-a