什么是原子化CSS，UnoCSS又是什么，對此有疑問的推薦看下antfu的這篇文章——重新構(gòu)想原子化 CSS (antfu.me) 相信看完這篇文章的你也會跟我一樣熱衷于UnoCSS.
介紹
今天介紹一個CSS開發(fā)利器 UnoCSS , 是一個具有高性能且極具靈活性的即時原子化 CSS 引擎，具有按需加載的特性，相信使用過 Tailwind CSS，Windi CSS ，等CSS框架的同學(xué)對CSS原子化這個概念都不會陌生，原子化 CSS 是一種 CSS 的架構(gòu)方式，它傾向于小巧且用途單一的 class，并且會以視覺效果進(jìn)行命名。
對比
unocss 的作者是Anthony Fu，是 Vite 團(tuán)隊的成員，也是 Vitesse （Vite 社區(qū)最受歡迎的起手模板之一） 的作者。Anthony Fu 在開發(fā)Vitesse是使用 Tailwind CSS 作為 Vitesse 的默認(rèn) UI 框架。但由于 Tailwind 生成了數(shù) MB 的 CSS，使得加載與更新 CSS 成為了整個 Vite 應(yīng)用的性能瓶頸。后來作者發(fā)現(xiàn)了Windi CSS，相比于Tailwind CSS 具有按需加載，零依賴等特性。在CSS文件打包的大小與加載速度上得到了很大的提升.
使用和配置
UnoCSS 是一個引擎，而非一款框架，因為它并未提供核心工具類，所有功能可以通過預(yù)設(shè)和內(nèi)聯(lián)配置提供。
- 規(guī)則(Rules) - 定義原子 CSS 實用程序
- 預(yù)設(shè)(Presets) - 常見用例的預(yù)定義配置。
- 快捷方式(Shortcuts) - 將多個規(guī)則組合成一個簡寫。
- 主題(Theme ) - 定義主題變量。
- 變體(Variants) - 將自定義約定應(yīng)用于規(guī)則。
- 轉(zhuǎn)換器(Transformers) - 將轉(zhuǎn)換器編碼為用戶源代碼以支持約定。
- 提取器(Extractors ) - 定義提取實用程序的位置和方式。
- 預(yù)檢(Preflights ) - 定義全局 CSS 規(guī)則。
- 層(Layers ) - 定義每個實用程序?qū)拥捻樞颉?/li>
- 自動完成(Presets ) - 定義自定義自動完成建議。
準(zhǔn)備
首先，使用 vite 創(chuàng)建一個最基礎(chǔ)的vue模板
pnpm create vite安裝依賴 unocss，@unocss/reset
pnpm i unocss,@unocss/reset如果需要使用 UnoCSS 的圖標(biāo)預(yù)設(shè)，還需要安裝@iconify/json
pnpm i @iconify/json如果需要使用 UnoCSS 的深色模式，最好再安裝一下@vueuse/core，方便切換深色模式
pnpm i @vueuse/core集成 UnoCSS
1.修改vite.config.ts,添加 unocss plugin
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import unocss from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), unocss()]
})2.修改main.ts
import { createApp } from 'vue'
/** 重置樣式 這里引入自定義的重置樣式也可 */
import '@unocss/reset/tailwind.css'
/**
* 項目內(nèi)的樣式，
* 注意：最好放在重置樣式后，uno.css前
*/
import './style.css'
/** 引入uno.css，不引入不生效 */
import 'uno.css'
import App from './App.vue'
createApp(App).mount('#app')注意：不管是UnoCSS還是tailwindcss、windicss，默認(rèn) 4單位 = 1rem，即 1單位 = 1/4rem，而 rem 是相對于html的 font-size 來計算的，一般來說大部分瀏覽器的html默認(rèn) font-size 為 16px，即 1rem = 16px，也就是說 Unocss 的1單位換算成 px 就是 4px，這種方式?jīng)]什么問題，但對于習(xí)慣了使用px計算的人來說，每次都要心算一遍要寫多少單位就略顯麻煩了。那么有沒有辦法讓 unocss 的 1單位=1px 了，這樣就沒有心算成本了，答案是當(dāng)然有：由公式 1單位 = 0.25 * ${html font-size} = 1px 可知：將 html 的 font-size 應(yīng)該為 4px 即可
3.新增unocss.config.ts
import { defineConfig, presetAttributify, presetUno, presetIcons } from 'unocss'
export default defineConfig({
presets: [presetUno(), presetAttributify(), presetIcons({scale: 1.2, warn: true})],
shortcuts: [
'wh-full': 'w-full h-full',
'flex-center': 'flex justify-center items-center',
'flex-col-center': 'flex-center flex-col',
'flex-x-center': 'flex justify-center',
'flex-y-center': 'flex items-center',
'i-flex-center': 'inline-flex justify-center items-center',
'i-flex-x-center': 'inline-flex justify-center',
'i-flex-y-center': 'inline-flex items-center',
'flex-col': 'flex flex-col',
'flex-col-stretch': 'flex-col items-stretch',
'i-flex-col': 'inline-flex flex-col',
'i-flex-col-stretch': 'i-flex-col items-stretch',
'flex-1-hidden': 'flex-1 overflow-hidden',
/***** grid布局 *****/
'grid-column-2': 'grid grid-cols-2 grid-rows-none',
'grid-column-3': 'grid grid-cols-3 grid-rows-none',
'grid-column-4': 'grid grid-cols-4 grid-rows-none',
'grid-column-5': 'grid grid-cols-5 grid-rows-none',
/**定位相關(guān)**/
'absolute-lt': 'absolute left-0 top-0',
'absolute-lb': 'absolute left-0 bottom-0',
'absolute-rt': 'absolute right-0 top-0',
'absolute-rb': 'absolute right-0 bottom-0',
'absolute-tl': 'absolute-lt',
'absolute-tr': 'absolute-rt',
'absolute-bl': 'absolute-lb',
'absolute-br': 'absolute-rb',
'absolute-center': 'absolute-lt flex-center wh-full',
'fixed-lt': 'fixed left-0 top-0',
'fixed-lb': 'fixed left-0 bottom-0',
'fixed-rt': 'fixed right-0 top-0',
'fixed-rb': 'fixed right-0 bottom-0',
'fixed-tl': 'fixed-lt',
'fixed-tr': 'fixed-rt',
'fixed-bl': 'fixed-lb',
'fixed-br': 'fixed-rb',
'fixed-center': 'fixed-lt flex-center wh-full',
'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
'ellipsis-text': 'nowrap-hidden text-ellipsis',
'transition-base': 'transition-all duration-300 ease-in-out'
],
rules: [
[/^bc-(.+)$/, ([, color]) => ({ 'border-color': `#${color}` })],
[/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
[/^p-(\d+)$/, (match) => ({ padding: `${match[1] / 4}rem` })],
['card-shadow', { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' }],
],
theme: {
colors: {
//primary: 'var(--primary-color)',
//dark_bg: 'var(--dark-bg)',
},
},
})使用UnoCSS
預(yù)覽效果
插件推薦 (UnoCSS)
此插件非常強大，不僅有輸入提示，并且還可以鼠標(biāo)懸浮顯示編譯后的css樣式，對自定義的 shortcuts、rules 和 colors 都生效哦， 效果如下圖
總結(jié)
UnoCSS 絕對是我用過的最好用的原子化CSS了，沒有之一，它設(shè)計很優(yōu)雅, 足夠輕，用著非常爽，并且它對 tailwindcss 和 windicss 的寫法做了兼容，你甚至可以直接對著 tailwindcss 文檔寫 UnoCSS，過渡成本無限接近 0?？赡苣銊傞_始寫原子化CSS的時候會有點痛苦，但請相信我，寫熟了之后你一定會直呼：臥槽，真香！
