什么是原子化CSS，UnoCSS又是什么，對(duì)此有疑問(wèn)的推薦看下antfu的這篇文章——重新構(gòu)想原子化 CSS (antfu.me) 相信看完這篇文章的你也會(huì)跟我一樣熱衷于UnoCSS.
介紹
今天介紹一個(gè)CSS開(kāi)發(fā)利器 UnoCSS , 是一個(gè)具有高性能且極具靈活性的即時(shí)原子化 CSS 引擎，具有按需加載的特性，相信使用過(guò) Tailwind CSS，Windi CSS ，等CSS框架的同學(xué)對(duì)CSS原子化這個(gè)概念都不會(huì)陌生，原子化 CSS 是一種 CSS 的架構(gòu)方式，它傾向于小巧且用途單一的 class，并且會(huì)以視覺(jué)效果進(jìn)行命名。
對(duì)比
unocss 的作者是Anthony Fu，是 Vite 團(tuán)隊(duì)的成員，也是 Vitesse （Vite 社區(qū)最受歡迎的起手模板之一） 的作者。Anthony Fu 在開(kāi)發(fā)Vitesse是使用 Tailwind CSS 作為 Vitesse 的默認(rèn) UI 框架。但由于 Tailwind 生成了數(shù) MB 的 CSS，使得加載與更新 CSS 成為了整個(gè) Vite 應(yīng)用的性能瓶頸。后來(lái)作者發(fā)現(xiàn)了Windi CSS，相比于Tailwind CSS 具有按需加載，零依賴等特性。在CSS文件打包的大小與加載速度上得到了很大的提升.
使用和配置
UnoCSS 是一個(gè)引擎，而非一款框架，因?yàn)樗⑽刺峁┖诵墓ぞ哳?，所有功能可以通過(guò)預(yù)設(shè)和內(nèi)聯(lián)配置提供。
- 規(guī)則(Rules) - 定義原子 CSS 實(shí)用程序
- 預(yù)設(shè)(Presets) - 常見(jiàn)用例的預(yù)定義配置。
- 快捷方式(Shortcuts) - 將多個(gè)規(guī)則組合成一個(gè)簡(jiǎn)寫(xiě)。
- 主題(Theme ) - 定義主題變量。
- 變體(Variants) - 將自定義約定應(yīng)用于規(guī)則。
- 轉(zhuǎn)換器(Transformers) - 將轉(zhuǎn)換器編碼為用戶源代碼以支持約定。
- 提取器(Extractors ) - 定義提取實(shí)用程序的位置和方式。
- 預(yù)檢(Preflights ) - 定義全局 CSS 規(guī)則。
- 層(Layers ) - 定義每個(gè)實(shí)用程序?qū)拥捻樞颉?/li>
- 自動(dòng)完成(Presets ) - 定義自定義自動(dòng)完成建議。
準(zhǔn)備
首先，使用 vite 創(chuàng)建一個(gè)最基礎(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'
/**
* 項(xiàng)目?jī)?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 是相對(duì)于html的 font-size 來(lái)計(jì)算的，一般來(lái)說(shuō)大部分瀏覽器的html默認(rèn) font-size 為 16px，即 1rem = 16px，也就是說(shuō) Unocss 的1單位換算成 px 就是 4px，這種方式?jīng)]什么問(wèn)題，但對(duì)于習(xí)慣了使用px計(jì)算的人來(lái)說(shuō)，每次都要心算一遍要寫(xiě)多少單位就略顯麻煩了。那么有沒(méi)有辦法讓 unocss 的 1單位=1px 了，這樣就沒(méi)有心算成本了，答案是當(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)
此插件非常強(qiáng)大，不僅有輸入提示，并且還可以鼠標(biāo)懸浮顯示編譯后的css樣式，對(duì)自定義的 shortcuts、rules 和 colors 都生效哦， 效果如下圖
總結(jié)
UnoCSS 絕對(duì)是我用過(guò)的最好用的原子化CSS了，沒(méi)有之一，它設(shè)計(jì)很優(yōu)雅, 足夠輕，用著非常爽，并且它對(duì) tailwindcss 和 windicss 的寫(xiě)法做了兼容，你甚至可以直接對(duì)著 tailwindcss 文檔寫(xiě) UnoCSS，過(guò)渡成本無(wú)限接近 0?？赡苣銊傞_(kāi)始寫(xiě)原子化CSS的時(shí)候會(huì)有點(diǎn)痛苦，但請(qǐng)相信我，寫(xiě)熟了之后你一定會(huì)直呼：臥槽，真香！
