目录
引言
最近我和我的同学在开发一个比赛的项目,我发现他只会用CSS编写样式,效率太慢的,这怎么能行,我直接让他使用UnoCSS,效率直接翻倍😏
UnoCSS是什么？🤔
UnoCSS是一个即时按需的原子化CSS引擎
什么是原子化？
原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。可以将原子化的 CSS 框架理解为这类 CSS 的统称 - Antfu
.m-0 {
margin: 0;
}
.text-red {
color: red;
}
CSS VS UnoCSS
接下来我们来对比以下
CSS实现
.box {
margin: 1px;
}UnoCSS实现
<div class="m-1">
<!-- 内容 -->
</div>
UnoCSS检测到m-1就会生成一下CSS
.m-1 { margin: 1px; }通过以上对比你应该知道为什么使用要原子化UnoCSS了吧
CSS 需要手动编写每个属性的值而UnoCSS只需要加上UnoCSS提供的对应类名就可以了😏
是不是很简单?不用新建CSS文件,也不用浪费时间在想起一个什么类名😉
UnoCSS VS Tailwind
有些同学可能还学过TailwindCSS
关于UnoCSS和TailwindCSS的对比我引用UnoCSS官方文档的一句话
UnoCSS 都从 Tailwind CSS 中汲取了很多灵感。由于 UnoCSS 是从头开始构建的，因此我们能够很好地了解原子 CSS 是如何利用现有技术进行设计并抽象为优雅而强大的 API 的。由于设计目标截然不同，因此它与 Tailwind CSS 并不是真正的同类比较。但我们将尝试列出一些差异。
Tailwind CSS 是一个 PostCSS 插件，而 UnoCSS 是一个同构引擎，具有与构建工具（包括 PostCSS 插件）的一流集成集合。这意味着 UnoCSS 可以更灵活地用于不同的地方（例如，CDN 运行时，它动态生成 CSS），并且与构建工具深度集成，以提供更好的 HMR、性能和开发者体验（例如，检查器 )
同学们可以根据自己的需求选择使用哪一个😙
交互式文档📄
这个时候我的同学问我: 那我怎么知道有CSS样式对应着UnoCSS的什么类名呢?🤔
然后我就告诉他UnoCSS官方提供了一个交互式文档 UnoCSS Interactive Docs (点击进入网站)
你可以在里面进行搜索
比如我要写绝对定位那我就搜索position,然后他就弹出这些推荐
可以看的出来绝对定位的类名是.position-absolute
开始使用
看完上面的CSS、Tailwind、UnoCSS的对比
那么接下来我来介绍一下如何使用UnoCSS
本次教程我们使用创建一个Vite+Vue3的项目
Webpack、Nuxt、Astro等更多示例可以看UnoCSS中文网
1.创建项目
npm create vue@latest # or use pnpm or use yarn我们创建一个最简单的项目
打开项目之后我们安装依赖
2.安装UnoCSS
npm i -D unocss # or pnpm yarn3.在vite.config.ts中安装插件
// vite.config.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import UnoCSS from "unocss/vite";
export default defineConfig({
plugins: [
vue(),
// 安装UnoCSS插件
UnoCSS()
],
});4.创建uno.config.ts文件
// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS options
})这个是UnoCSS配置文件
有以下配置，后面我会讲比较有用的几个配置 更多详情可以看UnoCSS中文网
- 规则 - 定义原子 CSS 工具
- 快捷方式 - 将多个规则组合成一个简写。
- 主题 - 定义主题变量。
- 变体 - 将自定义约定应用于规则。
- 提取器 - 定义提取工具的位置和方式。
- 预检 - 定义全局原始 CSS。
- 层 - 定义每个工具层的顺序。
- 预设 - 常见用例的预定义配置。
- 转换器 - 将代码转换器转换为用户源代码以支持约定。
- 自动补齐 - 定义自定义自动补齐建议。
5.将 virtual:uno.css 添加到你的主入口中
// main.ts
import 'virtual:uno.css'
// ...6.在App.vue里面测试
<div class="w-16 h-16 bg-pink text-white text-align-center leading-16">
Box
</div>这里的样式是
- w-16:宽度为4rem
- h-16:高度为4rem
- bg-pink:背景色为粉色
- text-white:文字颜色为白色
- text-align-center:文字居中
- leading-16:行高为4rem
效果
这里的w-16会生成
.w-16 {
width: 4rem; /* 64px */
}.w-1 = width:0.25rem = 4px
所以16个4px就是64px
后面的 h-16 leading-16 都是一样的
7.安装UnoCSS插件🔧
我同学说：这样太麻烦了，有没有写类名的时候有提示，而且还能知道生成之后的样式？🤔
当让有啦！
在VSCode扩展商店搜UnoCSS，第一个就是
安装之后该扩展将尝试在你的项目下查找 UnoCSS 配置。当没有找到配置时，扩展将被禁用
然后你写类名的时候就有提示了
把鼠标放到上面就会显示生成之后的类名了
8.UnoCSS配置
UnoCSS有以下配置：
接下来我就讲几个比较常用的配置，其他配置可以点击进入UnoCSS中文网
规则
规则有两种一种是静态规则另一种是动态规则
静态规则
export default defineConfig({
// unocss 配置
rules: [["m-6", { margin: "6rem" }]],
});
// 此时使用m-6 这个类名就会生成
// .m-6 {
// margin: 6rem;
// }动态规则
// uno.config.ts
import { defineConfig } from "unocss";
export default defineConfig({
// unocss 配置
rules: [
[/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) / 4}rem` })],
[/^p-(\d+)$/, match => ({ padding: `${Number(match[1]) / 4}rem` })],
],
});
// 将会生成
// .m-100 { margin: 25rem; }
// .m-3 { margin: 0.75rem; }
// .p-5 { padding: 1.25rem; }其中 d 是 m-100 中的 100 将它 除以 4 就是 25rem
在交互式文档中中也可以查看对应规则
快捷方式
快捷方式可以你让你将多个规则写成一个简写，例如我们定义一个粉色背景和白色字体的按钮：
// uno.config.ts
import { defineConfig } from "unocss";
export default defineConfig({
// ...
shortcuts: {
"btn-pink": "px-2 py-1 bg-pink text-white border-none",
},
});
使用：
<button class="btn-pink">
button
</button>效果
就是将很多个类名组合到一起
主题
Unocss 支持类似 TailwindCSS / Windi CSS 的主题系统，用户可以在配置中指定theme属性，它会深度合并到默认主题
示例：
// uno.config.ts
import { defineConfig } from "unocss";
export default defineConfig({
// unocss 配置
theme: {
colors: {
veryBlack: "#000000", // class="text-very-black" or class="bg-very-black"
light: {
primary: "#ffffff", // class="text-light-primary" or class="bg-light-primary"
},
},
},
});
可以在 rules & variants & shortcuts 配置属性中使用
更多关于配置可以点击UnoCSS中文网
预设
UnoCSS中使用可以使用definePreset自定义预设，将合并到配置中，当然还有官方预设和社区预设
在根目录下新建一个my-preset.ts文件
// my-preset.ts
import { Preset, definePreset } from 'unocss'
export default definePreset((options?: MyPresetOptions) => {
return {
name: 'my-preset',
rules: [
// ...
],
variants: [
// ...
],
...options
// 其他配置 支持大多数uno.config.ts的配置
}
})然后uno.confit.ts 中导入使用
// uno.config.ts
import { defineConfig } from 'unocss'
import myPreset from './my-preset'
export default defineConfig({
presets: [
myPreset({ /* 预设的配置 */ }),
],
})好了配置就介绍这些吧其中还有
- 变体-允许你对现有规则应用一些变体，例如 Tailwind CSS 的
hover:变体 - 提取器-用于从源代码中提取工具的使用情况
- 转换器-提供统一的接口来转换源代码以支持约定
- 预检-你可以从配置中注入原始 CSS 作为预检。解决后的
theme可用于自定义 CSS - 层-CSS顺序
- 自动补齐-可以针对 在线运行 和 VS Code 扩展 中的 UnoCSS 智能建议自定义自动补齐功能。
同学们可以点进相应的链接了解
预设
预设上面我已经介绍过了
| 包 | 描述 |
| 默认预设 | |
| 最小但重要的规则和变体 | |
| Tailwind CSS / Windi CSS 紧凑预设 | |
| 为其他规则启用属性化模式 | |
| 为其他规则启用标签化模式 | |
| 由 Iconify 提供支持的纯 CSS 图标解决方案 | |
| 网络字体（Google Fonts 等）支持 | |
| 排版预设 | |
| 将 rem 转换为 px 以供工具使用 |
可以点击UnoCSS中文网查看更多预设
挑几个我觉得比较有意思的预设讲讲
图标预设
可以使用类名生成图标
安装
pnpm add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]UnoCSS使用 Iconify 作为图标的数据源 ,你需要按照 @iconify-json/* 模式在 devDependencies 中安装相应的图标集
例如我们要安装 Ant Design Icons 图标,那就安装@iconify-json/ant-design
使用类名
<div class="i-ant-design:ant-design-outlined w-1em h-1em"></div>在Open Source Icon Sets - Iconify 这个网站点击你想要使用的图标可以看它对应的类名
检查 所有可用的图标。
你也可以一次性安装所有图标大约130MB
pnpm add -D @iconify/json
?bg换background-img- 将图标渲染为背景图片
?mask换mask- 将图标渲染为遮罩图片
<div class="w-full flex items-center justify-center gap-x-4 text-4xl p-2 mt-4">
<div class="i-vscode-icons:file-type-light-pnpm" />
<div class="i-vscode-icons:file-type-light-pnpm?mask text-red-300" />
</div>效果
属性化预设
安装
pnpm add -D @unocss/preset-attributify # or npm or yarn属性化模式就是可以将同一类型的属性组合到一起
<button
bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
>
Button
</button>
text-sm text-white可以分组为text="sm white"，而无需重复相同的前缀
更多配置请点击UnoCSS中文网
好的,UnoCSS的基本介绍就到这里,相信大家都有了基本的理解了吧?接下来可以自己在项目中使用练习
总结
- 我们对比的CSS、Tailwind、UnoCSS了，最终UnoCSS更有优势
- UnoCSS Interactive Docs 交互式文档 查询CSS对应UnoCSS的类名
- UnoCSS的基本使用，首先安装UnoCSS，在Vite.config.ts中安装，创建uno.config.ts配置文件，将
virtual:uno.css添加到你的主入口中，然后就可以开始使用了 - 安装UnoCSS的VSCode插件，提供类名提示等功能
- UnoCSS的配置规则、快捷方式、主题、预设等还有更多配置点击UnoCSS中文网
- 然后我们又讲了UnoCSS预设图标预设、属性化预设等点击UnoCSS中文网查看更多预设
参考资料
扫一扫
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
