当前位置：首页 > 软件库 > Web应用开发 > >

UnoCSS

即时原子化 CSS 引擎

授权协议 MIT

开发语言 JavaScript TypeScript HTML/CSS

所属分类 Web应用开发

软件类型开源软件

地区国产

投递者田德馨

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

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 工具。

使用案例

第三章使用UnoCSS原子化CSS

第三章使用UnoCSS原子化CSS UnoCSS的GitHub地址 UnoCSS的文档地址原子样式也有很多选择，最著名的就是 Tailwind。 Tailwind 虽然好，但是性能上有一些不足。由于Tailwind 会生成大量样式定义。全量的 CSS 文件往往体积会多至数 MB。这个对于页面性能是完全不可接受的。如果在开发时进行动态的按需剪裁，又会影响编译性能，降低开发体验。为了解决性能问题，
手撸一套原子类css(类似tailwindcss、unocss、windcss)

1 说明原子类css用起来嘎嘎爽，像tailwindcss、unocss、windcss等构建开发小项目贼快了，uniapp项目普遍都比pc端项目小，而且要兼容多端开发的特点，项目小、快速开发的特点比较突出。由于tailwindcss、unocss、windcss等在移动端的使用体验目前不太友好，比如对移动端兼容性不太好，如.w-1/2在小程序端属于特殊字符，会报错；还会存在特殊报错;
unocss

UnoCss文档 playground 安装 npm i -D unocss # 或者使用 cdn <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script> //安装unocss以及图标库 npm i -D unocss @unocss/preset-icons @iconi
Unocss 图标解析

unocss 动态引入图标无效在TS文件中写好 { icon: 'i-icon-park-outline:list-numbers', title: '数字输入框', type: 'number' } 在使用部分无效 <i :class="['el-icon', `${element.icon}`]" ></i> 这个是因为Unocss的
使用unocss进行css原子化开发

主要利用unocss的preset，制定自定义rule，配合正则表达式实现简单类名 1 设置flex属性 import type { Preset } from 'unocss const directionAbbr = { col: 'column', colr: 'column-reverse', row: 'row', rowr: 'row-reverse', } //主轴

UnoCSS

同类工具

相关阅读

相关文章

相关问答

相关文档