unocss

忍把浮名，换了浅斟低唱。——柳永《鹤冲天》

分享一个css框架unocss

可以通过class规则，生成对应样式，例如通过m-1生成margin: 0.25rem

而且规则可以通过

https://uno.antfu.me/

进行查询

除了预制规则，还可以自定义规则：

代码语言：javascript复制

rules: [
  ['m-1', { margin: '0.25rem' }],
]

即可生成

代码语言：javascript复制

.m-1 { margin: 0.25rem; }

还可以通过正则的方式

代码语言：javascript复制

rules: [
  [/^m-(d )$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(d )$/, match => ({ padding: `${match[1] / 4}rem` })],
]

使用起来

代码语言：javascript复制

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

css就会被生成

代码语言：javascript复制

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

css

0 人点赞