Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>atomic-css-snippetsNew to Visual Studio Code? Get it now.
atomic-css-snippets

atomic-css-snippets

swh

|
370 installs
| (0) | Free
原子css快捷定义方式
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

快捷生成符合一定规则的原子 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 %;
... ...
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft