忍把浮名,换了浅斟低唱。——柳永《鹤冲天》
分享一个css
框架unocss
可以通过class
规则,生成对应样式,例如通过m-1
生成margin: 0.25rem
而且规则可以通过
进行查询
除了预制规则,还可以自定义规则:
rules: [
['m-1', { margin: '0.25rem' }],
]
即可生成
.m-1 { margin: 0.25rem; }
还可以通过正则的方式
rules: [
[/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
[/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]
使用起来
<div class="m-100">
<button class="m-3">
<icon class="p-5" />
My Button
</button>
</div>
css
就会被生成
.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }