提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

unocss

2023-02-19 12:19:52 时间

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

分享一个css框架unocss

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

而且规则可以通过

https://uno.antfu.me/

进行查询

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

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; }

相关文章