柚子快報(bào)邀請碼778899分享：原子化 unocss 基礎(chǔ)用法

http://yzkb.51969.com/

一、什么是unocss

unocss是一個(gè)即時(shí)的原子CSS引擎，它可以讓你用簡短的類名來控制元素的樣式，而不需要寫復(fù)雜的CSS代碼。 當(dāng)然，原子樣式也有很多選擇，最著名的就是 Tailwind。 但由于Tailwind 會(huì)生成大量樣式定義，會(huì)導(dǎo)致全量的 CSS 文件往往體積會(huì)多至數(shù) MB，從而有性能上有一些不足。

擴(kuò)展：什么是原子化

原子化??CSS???是一種??CSS??架構(gòu)方式，其支持小型、單一用途的類，其名稱基于視覺功能。

更加通俗的來講，原子化??CSS???是一種新的??CSS???編程思路，它傾向于創(chuàng)建小巧且單一用途的??class??，并且以視覺效果進(jìn)行命名。

二、unocss的優(yōu)點(diǎn)

它可以讓你快速地開發(fā)和原型設(shè)計(jì)，而不需要考慮CSS的細(xì)節(jié)。它可以讓你的CSS文件更小，因?yàn)樗簧赡阌玫降墓ぞ哳悺Ｋ梢宰屇愕腃SS更一致，因?yàn)樗裱惶最A(yù)設(shè)的規(guī)則和變量。它可以讓你的CSS更靈活，因?yàn)樗С肿远x工具類，變體，指令和圖標(biāo)。它可以讓你的CSS更易于維護(hù)，因?yàn)樗苊饬藰邮經(jīng)_突和重復(fù)代碼。

三、項(xiàng)目中使用 unocss

參考 官方文檔Vite配置，webpack 往下翻即可

3.1 安裝

npm install -D unocss

3.2 打包配置

3.2.1 vite配置

// vite.config.js

import UnoCSS from 'unocss/vite'

import { defineConfig } from 'vite'

export default defineConfig({

plugins: [

UnoCSS(),

],

})

webpack5中配置

// webpack.config.js

const UnoCSS = require('@unocss/webpack').default

module.exports = {

plugins: [

UnoCSS(),

],

optimization: {

realContentHash: true,

},

}

webopack4中配置

// webpack.config.js

const UnoCSS = require('@unocss/webpack').default

module.exports = {

plugins: [

UnoCSS(),

],

css: {

extract: {

filename: '[name].[hash:9].css',

},

},

}

3.3 創(chuàng)建一個(gè)`uno.config.ts 配置文件

用于編寫用戶想要的 unocss 配置

// uno.config.js

import { defineConfig } from 'unocss'

export default defineConfig({

// ...UnoCSS options

})

3.4 全局引入

// main.js

import 'virtual:uno.css';

------------------------------------------------------------- 分割線 -------------------------------------------------------------

3.5 在vue-cli里面的配置有一些差異，請參照官方文檔

vue-cli5官方配置案例 vue-cli4官方配置案例

以vue-cli5配置為例，做講解

a. 安裝依賴

npm install -D unocss

npm install -D @unocss/webpack

b. 修改 vue.config.js

const UnoCSS = require('@unocss/webpack').default

module.exports = {

configureWebpack: {

plugins: [

UnoCSS()

],

optimization: {

// realContentHash: true

}

},

chainWebpack: config => {

// ... to do list

config.module.rule('vue').uses.delete('cache-loader')

config.module.rule('tsx').uses.delete('cache-loader')

config.merge({

cache: false

})

},

css: {

extract: true

}

}

c. 創(chuàng)建一個(gè)`uno.config.ts 配置文件

用于編寫用戶想要的 unocss 配置

// uno.config.js

import { defineConfig, presetAttributify, presetUno, transformerVariantGroup } from 'unocss'

export default defineConfig({

presets: [

presetAttributify(),

presetUno()

],

transformers: [

transformerVariantGroup()

],

rules: [

],

shortcuts: [

{

'flex-center': 'flex items-center justify-center'

}

]

})

d 全局引入

// main.js

import 'virtual:uno.css';

? ?

四、常見用法

4.1 交互式文檔

對應(yīng)剛?cè)胧?unocss 的同學(xué)來說，規(guī)則怎么寫是不知道的，但不用著急，官方（大佬 antfu）給出了 交互式文檔 輸入你想要的css樣式，就可以獲得對應(yīng)的class名稱

4.2 常見基礎(chǔ)用法

注意： unocss支持用預(yù)設(shè)單位（預(yù)設(shè)單位是rem），也可以自定義單位

padding 相關(guān)用法

.px-1 {

padding-left: 0.25rem;

padding-right: 0.25rem;

}

.px-10rpx {

padding-left: 10rpx;

padding-right: 10rpx;

}

.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;

}

margin相關(guān)用法 margin 相關(guān)可以參照 padding

.mx-1 {

margin-left: 0.25rem;

margin-right: 0.25rem;

}

.my-1 {

margin-top: 0.25rem;

margin-bottom: 0.25rem;

}

flex 相關(guān)

.flex {

display: flex;

}

.flex-1 {

flex: 1 1 0%;

}

.items-center {

align-items: center;

}

.justify-center {

justify-content: center;

}

文本相關(guān)

.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;

}

注意： 在 unocss 中，自定義顏色想要給到 類名后面，并且 RGB 格式的顏色會(huì)被轉(zhuǎn)成 RGBA 類型，如：

.color-#999 {

--un-text-opacity: 1;

color: rgba(153, 153, 153, var(--un-text-opacity));

}

.bg-#fcc {

--un-bg-opacity: 1;

background-color: rgba(255, 204, 204, var(--un-bg-opacity));

}

五、自定義規(guī)則

5.1 自定義規(guī)則分為兩類： 靜態(tài)規(guī)則 和 動(dòng)態(tài)規(guī)則

靜態(tài)規(guī)則：類似于自定義的一個(gè)固定樣式集

export default defineConfig({

rules: [

['m-1', { margin: '0.3rem' }] // 一個(gè)配置為一個(gè)數(shù)組

]

})

// 偽代碼： 如上配置之后，在css中檢測到m-1就會(huì)編譯成

.m-1 { margin: 0.3rem; }

動(dòng)態(tài)規(guī)則：會(huì)根據(jù)類目后面的參數(shù)生成對應(yīng)的樣式，在 交互式文檔 中可以明確的看出相關(guān)規(guī)則

export default defineConfig({

rules: [

/** match[1]代表獲取到的值 */

[/^m-(\d+)$/, match => ({ margin: `${+match[1] * 10}px` })],

[/^p-(\d+)$/, match => ({ padding: `${+match[1] * 10}px` })],

]

})

// 偽代碼： 這樣就可以修改unocss預(yù)設(shè)的大小，例如m-1會(huì)編譯成

.m-1 { margin: 10px; }

5.2 配置快捷方式（樣式集合）

在vscode中我們都會(huì)有用到快捷鍵一鍵生成代碼，unocss也不例外，假如你有個(gè)盒子，里面的內(nèi)容需要垂直居中，那么就可以定義為：

export default defineConfig({

shortcuts: [

{'flex-center': 'flex items-center justify-center',}, // 靜態(tài)快捷方式，是一個(gè)對象，可配多個(gè)

]

})

當(dāng)然，也可以精選 動(dòng)態(tài)配置快捷方式

export default defineConfig({

shortcuts: [

[/^base-border-(.*)$/, match => `border-1 border-style-dashed border-${match[1]}`], // 動(dòng)態(tài)快捷方式，一個(gè)配置為一個(gè)數(shù)組

]

})

// 偽代碼： 編譯結(jié)果

.base-border-red {

border-width: 1px;

--un-border-opacity: 1;

border-color: rgba(248, 113, 113, var(--un-border-opacity));

border-style: dashed;

}

六、安裝vscode插件

非常好用，推薦

安裝插件 安裝啟用后，頁面上就能看出哪些 class 使用 unocss 提供 （帶有虛線），并且能顯示類名對應(yīng)的樣式內(nèi)容，如下： 配置vscode的自動(dòng)提示

ctrl + shift + p => 輸入 open Setting => 選擇 首選項(xiàng)：打開用戶設(shè)置 添加以下配置

"editor.quickSuggestions": {

"strings": true,

"other": true,

"comments": true,

},

配置完成后，在輸入類名時(shí)會(huì)對 unocss 中存在的 class 進(jìn)行只能提示，如：

七、在style中使用unocss

? ? 相關(guān)文檔：

官方文檔/英文 => 可用于學(xué)習(xí)項(xiàng)目配置、rules配置 交互式文檔 => 可用于查詢樣式對應(yīng)的類名 參考文章 => 感謝博主的分享

? ?

文章僅為本人學(xué)習(xí)過程的一個(gè)記錄，僅供參考，如有問題，歡迎指出！

對博客文章的參考，若原文章博主介意，請聯(lián)系刪除！請?jiān)?/p>

柚子快報(bào)邀請碼778899分享：原子化 unocss 基礎(chǔ)用法

http://yzkb.51969.com/

相關(guān)鏈接