该换种更高效的方式写 CSS 啦,举个例:
<div class="flex">
</div>
相当于
<div class="flex">
</div>
<style>
.flex {
display: flex;
}
</style>
当然,还有超多强大的功能帮我们提升书写样式的效率,即刻开始吧!
使用流程
1. 安装 UnoCSS
npm i -D unocss
2. 添加到 vite 配置中
vite.config.ts
import UnoCSS from 'unocss/vite'
plugins 中添加
UnoCSS(),
3. main.ts 中导入
import 'virtual:uno.css'
4. 创建配置文件
项目目录下新建文件 uno.config.ts,内容为
import { defineConfig } from 'unocss'
export default defineConfig({
// UnoCSS 的配置
})
后续使用 unocss 比较高级的功能时会用到。
5. vscode 安装 UnoCSS 扩展
- 方便 UnoCSS 的快捷输入
- 可以便捷查看最终样式
UnoCSS 功能详解
原子化 CSS
即本文开头演示的,用简单且功能单一的 class 来描述样式。
比如:让文字变成红色,并添加 10px 的外边距
<div class="text-red m-2.5">外边距为10px, 内部文字为红色</div>
vscode 安装了 UnoCSS 扩展后,鼠标悬浮到 class 上,可见 UnoCSS 的最终样式效果。
在 class 中输入空格,会触发输入提示
通过官网可查询样式写法
https://unocss.dev/interactive/
自定义 CSS
官方的样式写法使用不习惯? 可以自己定义!
uno.config.ts 中添加 rules 即可
import { defineConfig } from 'unocss'
export default defineConfig({
rules: [
['p-10', { padding: '10px' }],
['m-10', { margin: '10px' }]
]
})
但这样一个个定义太麻烦,快来使用正则表达式批量定义
rules: [[/^p-(\d+)$/, (match) => ({ padding: `${match[1]}px` })]]
从此,p- 后的数字是多少,就是多少 px 的内边距,如
快捷 CSS
比如一个绿色按钮的样式,需要多处使用,可以将其定义为 快捷 CSS
uno.config.ts 中添加 shortcuts 实现:
shortcuts: {
'btn-green': 'text-white bg-green-500 hover:bg-green-700'
},
页面中使用
<button class="btn-green">保存</button>
效果如下
同样支持正则的写法实现批量定义,如
shortcuts: [
// you could still have object style
{
btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
},
// dynamic shortcuts
[/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
]
使用
<div class="p-20 flex w-xs justify-around">
<button class="btn-green">保存</button>
<button class="btn-red">删除</button>
</div>
效果
在 CSS 中使用 UnoCSS
需先修改配置文件 uno.config.ts (改动部分,见下方代码中的注释)
import { defineConfig } from 'unocss'
// 导入 transformerDirectives
import { transformerDirectives } from 'unocss'
export default defineConfig({
// 使用 transformerDirectives
transformers: [transformerDirectives()]
})
使用方法: 在 --at-apply 中写 UnoCSS 即可。
.box {
--at-apply: p-20 flex justify-around;
background-color: green;
}
更多用法详见官网
https://unocss.dev/guide/