vscode扩展
class 类名自动补全工具
使用该扩展需要配合同名npm包使用
使用首字母缩写
| css | class | 说明 |
| ---- | ----- | ----- |
| margin: 10px | g-m-10 |
| margin-top: 10px | g-mt-10 |
| margin-top: 10px; margin-bottom: 10px; | g-mtb-10 | tblr顺序不敏感 |
| padding: 10px | g-p-10 |
| padding-top: 10px | g-pt-10 |
| padding-top: 10px; padding-bottom: 10px; | g-ptb-10 | tblr顺序不敏感 |
| position: fixed | g-p-f |
| font-size: 20px | g-fs-20 |
| color: #333 | g-c-#333 |
| cursor: not-allowed | g-c-na |
| background-color: red | g-bg-red | 注意background-color缩写与border-color同名，故background-color缩写为bg |
| border-color: red | g-bc-red |
| font-weight: 400 | g-fw-400 |
| display: flex | g-d-f |
| display: inline-flex | g-d-if |
| height: 20px | g-h-20 |
| width: 20px | g-w-20 |
| z-index: 2 | g-zi-2 |
| line-height: 20px | g-lh-20 |
| border-width: 2px | g-bw-2 |
| border-radius: 4px | g-br-4 |
| border-style: solid | g-bs-s |
| object-fit: cover | g-of-c |
| grid-gap: 10px | g-gg-10 |
| grid-row-gap: 10px | g-grg-10 |
| grid-column-gap: 10px | g-gcg-10 |
| align-items: flex-start | g-ai-fs |
| justify-content: center | g-jc-c |
| flex-direction: column | g-fd-c |
| flex-grow: 1 | g-fg-1 |
| top: 0 | g-t-0 |
| bottom: 0 | g-b-0 |
| left: 0 | g-l-0 |
| right: 0 | g-r-0 |
| overflow: hidden | g-o-h |
| overflow-x: hidden | g-ox-h |
| overflow-y: hidden | g-oy-h |
| opacity: 0.1 | g-o-0.1 |
| opacity: 1 | g-o-1 |
| order: 2| g-o-2 |
| text-align: center | g-ta-c |
| |
