UnoCSS 是一个具有高性能且极具灵活性的即时原子化 CSS 引擎,受 Windi CSS、Tailwind CSS、Twind 的启发。
特性:
- 完全可定制- 没有核心实用程序,所有功能都通过预设提供。
- 无需解析、无需 AST、无需扫描,它是即时的(比 Windi CSS 或 Tailwind JIT 快 200 倍)
- ~3.5kb min+gzip - 零依赖和浏览器友好。
- 快捷方式- 动态别名实用程序。
- 属性模式- 在属性中分组实用程序
- 纯 CSS 图标- 使用任何图标作为单个类。
- 检查器- 以交互方式检查和调试。
- CSS-in-JS 运行时版本
- CSS Scoping
- CSS 代码拆分 - 为 MPA 提供最小的 CSS。
- 库友好 - 随你的组件库提供原子样式并安全地限定范围。
Benchmark
11/5/2021, 4:26:57 AM
1656 utilities | x50 runs (min build time)
none 8.30 ms / delta. 0.00 ms
unocss v0.4.15 13.58 ms / delta. 5.28 ms (x1.00)
windicss v3.2.1 989.57 ms / delta. 981.27 ms (x185.94)
tailwindcss v3.0.0-alpha.1 1290.96 ms / delta. 1282.66 ms (x243.05)
UnoCSS 是一个引擎,而非一款框架,因为它并未提供核心工具类,所有功能可以通过预设和内联配置提供。
默认情况下,UnoCSS 应用默认预设。它提供了流行的实用程序优先框架的通用超集,包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等。
例如,ml-3
(Tailwind)、ms-2
(Bootstrap)、ma4
(Tachyons)、mt-10px
(Windi CSS) 都是有效的。
.ma4 { margin: 1rem; } .ml-3 { margin-left: 0.75rem; } .ms-2 { margin-inline-start: 0.5rem; } .mt-10px { margin-top: 10px; }
UnoCSS 的主要目标是直观性和可定制性。它可以让你在数十秒内,定义你自己的 CSS 工具。
评论