快捷生成符合一定规则的原子 css 代码块
- 在 css 文件中输入以下快捷键,呼出对应的代码块,快捷生成符合一定规则的代码块;
- 该插件主要针对小程序类名对某些特殊符号不支持,重新定义了一套类名命名规则,统一规则后方便调用,更加语义化;
- 该插件目前仅支持 rpx 单位,主要用于小程序,后期迭代版本会考虑更多场景的支持;
key |
对应的代码块儿语义 |
.w |
width: xx rpx; |
.wp |
width: xx rpx; |
.mw |
max-width: xx rpx; |
.mwp |
max-width: xx %; |
.miw |
min-width: xx rpx; |
.miwp |
min-width: xx %; |
.h |
height: xx rpx; |
.mh |
max-heigh: xx rpx; |
.mih |
min-height: xx rpx; |
.t |
top: xx rpx; |
.l |
left: xx rpx; |
.r |
right: xx rpx; |
.b |
bottom: xx rpx; |
.zi |
z-index: xx; |
.p |
padding: xx rpx; |
.p2 |
padding: xx xx; |
.p3 |
padding: xx xx xx; |
.p4 |
padding: xx xx xx xx; |
.pt |
padding-top: xx rpx; |
.pl |
padding-left: xx rpx; |
.pr |
padding-right: xx rpx; |
.pb |
padding-bottom: xx rpx; |
.m |
margin: xx; |
.m2 |
margin: xx xx; |
.m3 |
margin: xx xx xx; |
.m4 |
margin: xx xx xx xx; |
.mt |
margin-top: xx rpx; |
.ml |
margin-left: xx rpx; |
.mr |
margin-right: xx rpx; |
.mb |
margin-bottom: xx rpx; |
.m1a |
margin: xx auto; |
.m2a |
margin: xx auto xx; |
.bds |
border: xx solid #color; |
.bds-l |
border-left: xx solid #color; |
.bds-r |
border-right: xx solid #color; |
.bds-l |
border-top: xx solid #color; |
.bds-l |
border-bottom: xx solid #color; |
.bdda |
border: xx dashed #color; |
.bdda-l |
border-left: xx dashed #color; |
.bdda-r |
border-right: xx dashed #color; |
.bdda-l |
border-top: xx dashed #color; |
.bdda-l |
border-bottom: xx dashed #color; |
.bddo |
border: xx dotted #color; |
.bddo-l |
border-left: xx dotted #color; |
.bddo-r |
border-right: xx dotted #color; |
.bddo-l |
border-top: xx dotted #color; |
.bddo-l |
border-bottom: xx dotted #color; |
.br |
border-radius: xx; |
.br2 |
border-radius: xx xx; |
.br3 |
border-radius: xx xx xx; |
.brp |
border-radius: xx %; |
... |
... |
| |