文章目录
- 什么是unocss?
- unocss的优点
- 安装unocss
- 在打包工具配置文件中配置插件
- vite配置
- 在webpack5中配置
- 在webopack4中配置
- 在vue脚手架(webpack5)中使用
- 创建一个`uno.config.ts 配置文件
- 在main.ts中使用
- 安装vscode插件unocss
- 查询交互式文档
- 基本用法(以下都是一些常用例子,并不代表只有这些)
- padding相关用法
- magin相关用法
- flex相关用法
- 文本相关用法
- 配置用法
- 快捷方式
- 动态快捷方式
- 总结
什么是unocss?
unocss是一个即时的原子CSS引擎,它可以让你用简短的类名来控制元素的样式,而不需要写复杂的CSS代码。
unocss的优点
- 它可以让你快速地开发和原型设计,而不需要考虑CSS的细节。
- 它可以让你的CSS文件更小,因为它只生成你用到的工具类。
- 它可以让你的CSS更一致,因为它遵循一套预设的规则和变量。
- 它可以让你的CSS更灵活,因为它支持自定义工具类,变体,指令和图标。
- 它可以让你的CSS更易于维护,因为它避免了样式冲突和重复代码。
安装unocss
pnpm add -D unocss
// or
yarn add -D unocss
// or
npm install -D unocss
在打包工具配置文件中配置插件
vite配置
// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
UnoCSS(),
],
})
在webpack5中配置
npm install @unocss/webpack
// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
plugins: [
UnoCSS(),
],
optimization: {
realContentHash: true,
},
}
在webopack4中配置
npm install @unocss/webpack
// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
plugins: [
UnoCSS(),
],
css: {
extract: {
filename: '[name].[hash:9].css',
},
},
}
在vue脚手架(webpack5)中使用
//vue.config
const { defineConfig } = require("@vue/cli-service");
const UnoCSS = require("@unocss/webpack").default;
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [UnoCSS()],
optimization: {
realContentHash: true,
},
},
});
创建一个`uno.config.ts 配置文件
// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
export default defineConfig({
presets: [
presetAttributify({ /* preset options */ }),
presetUno(),
],
})
在main.ts中使用
// main.ts
// vite如下配置
import 'virtual:uno.css'
// webpack如下配置
import 'uno.css'
安装vscode插件unocss
如图所示
在settings.json中配置,这里的作用是写css的时候带智能提示
"editor.quickSuggestions": {
"strings": true,
"other": true,
"comments": true,
},
配置完后如下图
查询交互式文档
刚开始入手的小白怎么办,咱啥也母鸡啊,那就查看unocss的交互式文档
在其中输入属性获取类名。如图所示
基本用法(以下都是一些常用例子,并不代表只有这些)
unocss支持用预设单位,也可以自定义单位,例如
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-10rpx {
padding-left: 10rpx;
padding-right: 10rpx;
}
padding相关用法
.p-t-1 {
padding-top: 0.25rem;
}
.p-b-1 {
padding-bottom: 0.25rem;
}
.p-l-1 {
padding-left: 0.25rem;
}
.p-r-1 {
padding-right: 0.25rem;
}
.p-1 {
padding: 10px;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
magin相关用法
margin和padding用法一模一样
例如:
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
flex相关用法
用法大同小异,下面是部分常用例子
.flex {
display: flex;
}
.flex-1 {
flex: 1 1 0%;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
文本相关用法
.color-#999 {
--un-text-opacity: 1;
color: rgba(153, 153, 153, var(--un-text-opacity));
}
.text-12px {
font-size: 12px;
}
.break-all {
word-break: break-all;
}
配置用法
- 静态规则配置
export default defineConfig({
rules: [
['m-1', { margin: '0.3rem' }]
]
})
如上配置之后,在css中检测到m-1就会编译成
.m-1 { margin: 0.3rem; }
- 动态规则
export default defineConfig({
rules: [
/** match[1]代表获取到的值 */
[/^m-(\d+)$/, match => ({ margin: `${+match[1] * 10}px` })],
[/^p-(\d+)$/, match => ({ padding: `${+match[1] * 10}px` })],
]
})
这样就可以修改unocss预设的大小,例如m-1会编译成
.m-1 { margin: 10px; }
快捷方式
在vscode中我们都会有用到快捷键一键生成代码,unocss也不例外,假如你有个盒子,里面的内容需要垂直居中,那么就可以定义为
export default defineConfig({
shortcuts: [
'flex-center': 'flex items-center justify-center',
]
})
动态快捷方式
export default defineConfig({
shortcuts: [
[/^base-border-(.*)$/, match => `border-1 border-style-dashed border-${match[1]}`],
]
})
编译结果
.base-border-red {
border-width: 1px;
--un-border-opacity: 1;
border-color: rgba(248, 113, 113, var(--un-border-opacity));
border-style: dashed;
}
总结
unocss刚上手可能有点不习惯,写多了再加上unocss的插件有语法智能提示,能使我们工作效率大大提高,接下来就是unocss熟练度的问题了。加油,看这篇文章的陌生人。