UnoCSS原子CSS引擎-前端福音

UnoCSS是一款原子化的即時按需 CSS 引擎,其中沒有核心實用程序,所有功能都是通過預設提供的。默認情況下UnoCSS應用通過預設來實現相關功能。

UnoCSS中文文檔

https://www.unocss.com.cn

在這里插入圖片描述

前有很多種原子化的框架,例如 Tailwind CSS,Windi CSS 以及 Tachyons 等。

為什么要原子化 CSS?

  • 不知道怎么取類名,應該叫什么名字呢,該怎么統一
  • CSS頁面樣式太多,每次一個頁面要新寫一個重復類,自己都不記得有哪些類了
  • Style文件和頁面文件來回反復橫跳新增全局樣式,太麻煩

傳統方式可能會使用比如 scss 預處理器生成自己想要的 class 類,如下所示:

@for $i from 1 through 10 {.m-#{$i} {margin: $i px;}
}
// 結果為:
.m-1 { margin: 1 px; } 
.m-2 { margin: 2 px; } 
/* ... */ 
.m-10 { margin: 10 px; }

上述方式會產生很多場景下可用的 class,可以涵蓋很多場景,但是其中也會有很多種并不會被使用到,從而了導致大量的冗余;因此原子化 CSS 中對于這個也進行了優化,通過按需加載的理念進行預設等方式減少 CSS 的打包體積;

相比原始寫法,應用原子化 CSS 可以減少很多 CSS 的書寫工作,減少每次新增一個新的樣式而重復新增的代碼,比如一個項目中 flex 和 margin 配置一般都會重復寫很多次,使用原子化 CSS 不用重新去寫這些樣式,直接綁定相對應的 class 類名就可以起到同樣的效果,因此減少了項目整體的代碼行數量和無用的工作量。

總的來說原子化 CSS 可以減少 CSS 的體積,同時提高 CSS 類的復用率,減少類名起名的復雜度;但是由于多種 CSS 樣式堆積,可能會造成 class 名過長的缺點;同時增加記住 CSS 樣式的記憶成本;

那么目前哪些人在使用原子化 CSS 呢?

一些網站已經開始使用原子化 CSS 比如 github , swiper.js 等↓如下圖所示,他們頁面的 CSS 類型可以明顯看出是使用了原子化 CSS
在這里插入圖片描述
在這里插入圖片描述

一種原子化 CSS 框架 - UnoCss

UnoCSS 是一個引擎,而非一款框架,因為它并未提供核心工具類,所有功能可以通過預設和內聯配置提供;

UnoCSS 中文官網鏈接
https://www.unocss.com.cn/

原子化 CSS 的概念

所謂 原子化 CSS ,指的是一種用于CSS的架構方式的理念,它傾向于 用途單一的 class,并 以視覺效果進行命名。例如 bootstrap 的顏色系統,為我們提供了直觀的顏色名稱:
在這里插入圖片描述
我們可以將這些名稱以相似的命名方式構建 css 類:

// Background color
.bg-blue-100 { background-color: $blue-100 }
.bg-blue-200 { background-color: $blue-200 }
.bg-blue-300 { background-color: $blue-300 }
.bg-blue-400 { background-color: $blue-400 }
.bg-blue-500 { background-color: $blue-500 }
.bg-blue-600 { background-color: $blue-600 }
.bg-blue-700 { background-color: $blue-700 }
.bg-blue-800 { background-color: $blue-800 }
.bg-blue-900 { background-color: $blue-900 }
// Font color
.ft-blue-100 { color: $blue-100 }
.ft-blue-200 { color: $blue-200 }
.ft-blue-300 { color: $blue-300 }
.ft-blue-400 { color: $blue-400 }
.ft-blue-500 { color: $blue-500 }
.ft-blue-600 { color: $blue-600 }
.ft-blue-700 { color: $blue-700 }
.ft-blue-800 { color: $blue-800 }
.ft-blue-900 { color: $blue-900 }
// margin
.m-1 { margin: 0.25 rem; }
.m-2 { margin: 0.5 rem; }
.m-3 { margin: 0.75 rem; }
.m-4 { margin: 1 rem; }
.m-5 { margin: 1.25 rem; }
.m-6 { margin: 1.5 rem; }
.m-7 { margin: 1.75 rem; }
.m-8 { margin: 2 rem; }
.m-9 { margin: 2.25 rem; }

我們可以很直觀地使用和調整這些變量值來滿足我們實際開發中的需求,同時我們可以通過動控制 DOM 的樣式來輕松地對效果進行切換,這在 一些現代前端框架(如vue)中,都可以有很絲滑的體驗。

這個例子中的變量為 scss/sass(Sass) 變量,Sass 是目前最強大的前端樣式預編譯語言,本文在后文中也會有一些涉及它的內容。如果你只會 css,或者還在使用 Less(另一種流行的預編譯語言),那么建議你盡早學一下 scss 語法,這十分強大方便,bootstrap、elementPlus 等等多數當前主流框架早以切換到其構建樣式系統。

為什么推薦原子化 CSS

那么為什么要原子化呢。很顯然是讓代碼更 直觀可讀。另外一方面,從設計師的角度出發,如果我們拿到下面這個語義化的外邊距變量名:

.p-1 { margin: 0.25 rem; }
.p-2 { margin: 0.5 rem; }
/* ... */
.p-9 { margin: 2.25 rem; }

完全就可以對照著呈現效果自己手動更改變量來完成效果切換!

原子化 CSS 的實現實踐

如何才能具備原子化的理念的,實現方法有很多。在一個大項目中為了原子化 CSS,。可以先 提供所有你可能需要用到的 CSS 工具,例如 外邊距的大小工具——我們需要約定好一套規范,就像前面的代碼那樣,使用 p 表示 padding 的簡寫,使用 數字 1、2、3、… 表示基值的倍數,這里約定基值為 0.25 rem 。
很顯然在現實項目中通過手動列舉 CSS 類名并逐個描述來完成一套這樣的約定是麻煩的,比如在這種情況下為了盡可能簡單一點我們會使用 root 為元素中定義一些CSS變量——它們會在不同的原子類中反復用到:

:root {--blue-100: #CEE1FE;--blue-200: #9DC3FC;--blue-300: #69A1F3;--blue-400: #3C89FA;--blue-500: #0D6DFB;--blue-600: ##0A58CA;--blue-700: #084297;--blue-800: #052C65;--blue-900: #031633;--rsize-1: 0.25 rem;--rsize-2: 0.5 rem;--rsize-3: 0.75 rem;--rsize-4: 1 rem;--rsize-5: 1.25 rem;--rsize-6: 1.5 rem;--rsize-7: 1.75 rem;--rsize-8: 2.00 rem;--rsize-9: 2.25 rem;
}

然后施展原子css我們的優勢了:

// Background color
.bg-blue-100 { background-color: var(--blue-100) }
.bg-blue-200 { background-color: var(--blue-200) }
// ...
.bg-blue-900 { background-color: var(--blue-200) }
// Font color
.ft-blue-100 { color: var(--blue-100) }
.ft-blue-200 { color: var(--blue-200) }
// ...
.ft-blue-900 { color: var(--blue-900) }
// Margin
.m-1 { margin: var(--rsize-1) }
.m-2 { margin: var(--rsize-1) }
// ...
.m-9 { margin: var(--rsize-9) }

使用預編譯語言

這樣是不是依然很麻煩——好在我們可以通過編程來完成。
由于 css 自身并沒有這樣的能力,以前不得不借助其它語言來生成這樣的東西,但如今我們可以使用 如 Sass、Less 這樣的預處理器來實現。例如生成 10
p-1、p-2、…、p-9,我們可以使用 @for 指令:

@for $i from 1 through 9 {.m-#{$i} {margin: $i / 4 rem;}
}

上面的 @for 指令可以在限制的范圍內重復輸出格式,其語法格式為:

@for $var from <start> through <end> {// ... style
}

或者

@for $var from <start> to <end> {// ... style
}

其中:
? KaTeX parse error: Expected '}', got 'EOF' at end of input: …是迭代變量,可以在塊內通過 {var} 的格式來引用;
? 當使用 through 時,條件范圍包含 與 的值,而使用 to 時條件范圍只包含 的值不包含 的值;
? 必須是整數值。
對于顏色值的計算和處理要復雜一些,我們需要用到一些 Sass 內置的一些顏色處理函數,例如 mix、adjust-hue、change-color、scale-color、desaturate、transparentize等等

總結感受:
在使用 UnoCSS 的過程中,感受到了不用寫 的快樂,不用來回穿插 CSS 文件和 VUE 文件,CSS 類名隨手就寫上,想要什么樣式往上堆積就行,還不用去絞盡腦汁的去想起什么類名,帶來了很多便捷的地方;但是也存在一定的困難點,就是會造成無法快速定位樣式問題的困惑;

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/80222.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/80222.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/80222.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【Qwen2.5-VL 踩坑記錄】本地 + 海外賬號和國內賬號的 API 調用區別(阿里云百煉平臺)

API 調用 阿里云百煉平臺的海內外 API 的區別&#xff1a; 海外版&#xff1a;需要進行 API 基礎 URL 設置國內版&#xff1a;無需設置。 本人的服務器在香港&#xff0c;采用海外版的 API 時&#xff0c;需要進行如下API端點配置 / API基礎URL設置 / API客戶端配置&#xf…

C語言筆記(鵬哥)上課板書+課件匯總(結構體)-----數據結構常用

結構體 目錄&#xff1a; 1、結構體類型聲明 2、結構體變量的創建和初始化 3、結構體成員訪問操作符 4、結構體內存對齊*****&#xff08;重要指數五顆星&#xff09; 5、結構體傳參 6、結構體實現位段 一、結構體類型聲明 其實在指針中我們已經講解了一些結構體內容了&…

UV: Python包和項目管理器(從入門到不放棄教程)

目錄 UV: Python包和項目管理器&#xff08;從入門到不放棄教程&#xff09;1. 為什么用uv&#xff0c;而不是conda或者pip2. 安裝uv&#xff08;Windows&#xff09;2.1 powershell下載2.2 winget下載2.3 直接下載安裝包 3. uv教程3.1 創建虛擬環境 (uv venv) 4. uvx5. 此pip非…

網絡開發基礎(游戲方向)之 概念名詞

前言 1、一款網絡游戲分為客戶端和服務端兩個部分&#xff0c;客戶端程序運行在用戶的電腦或手機上&#xff0c;服務端程序運行在游戲運營商的服務器上。 2、客戶端和服務端之間&#xff0c;服務端和服務端之間一般都是使用TCP網絡通信。客戶端和客戶端之間通過服務端的消息轉…

java將pdf轉換成word

1、jar包準備 在項目中新增lib目錄&#xff0c;并將如下兩個文件放入lib目錄下 aspose-words-15.8.0-jdk16.jar aspose-pdf-22.9.jar 2、pom.xml配置 <dependency><groupId>com.aspose</groupId><artifactId>aspose-pdf</artifactId><versi…

【C/C++】插件機制:基于工廠函數的動態插件加載

本文介紹了如何通過 C 的 工廠函數、動態庫&#xff08;.so 文件&#xff09;和 dlopen / dlsym 實現插件機制。這個機制允許程序在運行時動態加載和調用插件&#xff0c;而無需在編譯時知道插件的具體類型。 一、 動態插件機制 在現代 C 中&#xff0c;插件機制廣泛應用于需要…

【音視頻】AAC-ADTS分析

AAC-ADTS 格式分析 AAC?頻格式&#xff1a;Advanced Audio Coding(?級?頻解碼)&#xff0c;是?種由MPEG-4標準定義的有損?頻壓縮格式&#xff0c;由Fraunhofer發展&#xff0c;Dolby, Sony和AT&T是主 要的貢獻者。 ADIF&#xff1a;Audio Data Interchange Format ?…

機器學習 Day12 集成學習簡單介紹

1.集成學習概述 1.1. 什么是集成學習 集成學習是一種通過組合多個模型來提高預測性能的機器學習方法。它類似于&#xff1a; 超級個體 vs 弱者聯盟 單個復雜模型(如9次多項式函數)可能能力過強但容易過擬合 組合多個簡單模型(如一堆1次函數)可以增強能力而不易過擬合 集成…

通過爬蟲方式實現頭條號發布視頻(2025年4月)

1、將真實的cookie貼到代碼目錄中toutiaohao_cookie.txt文件里,修改python代碼里的user_agent和video_path, cover_path等變量的值,最后運行python腳本即可; 2、運行之前根據import提示安裝一些常見依賴,比如requests等; 3、2025年4月份最新版; 代碼如下: import js…

Linux ssh免密登陸設置

使用 ssh-copy-id 命令來設置 SSH 免密登錄&#xff0c;并確保所有相關文件和目錄權限正確設置&#xff0c;可以按照以下步驟進行&#xff1a; 步驟 1&#xff1a;在源服務器&#xff08;198.120.1.109&#xff09;生成 SSH 密鑰對 如果還沒有生成 SSH 密鑰對&#xff0c;首先…

《讓機器人讀懂你的心:情感分析技術融合奧秘》

機器人早已不再局限于執行簡單機械的任務&#xff0c;人們期望它們能像人類伙伴一樣&#xff0c;理解我們的喜怒哀樂&#xff0c;實現更自然、溫暖的互動。情感分析技術&#xff0c;正是賦予機器人這種“理解人類情緒”能力的關鍵鑰匙&#xff0c;它的融入將徹底革新機器人與人…

Linux筆記---進程間通信:匿名管道

1. 管道通信 1.1 管道的概念與分類 管道&#xff08;Pipe&#xff09; 是進程間通信&#xff08;IPC&#xff09;的一種基礎機制&#xff0c;主要用于在具有親緣關系的進程&#xff08;如父子進程、兄弟進程&#xff09;之間傳遞數據&#xff0c;其核心特性是通過內核緩沖區實…

Ollama API 應用指南

1. 基礎信息 默認地址: http://localhost:11434/api數據格式: application/json支持方法: POST&#xff08;主要&#xff09;、GET&#xff08;部分接口&#xff09; 2. 模型管理 API (1) 列出本地模型 端點: GET /api/tags功能: 獲取已下載的模型列表。示例:curl http://lo…

【OSCP-vulnhub】Raven-2

目錄 端口掃描 本地/etc/hosts文件解析 目錄掃描&#xff1a; 第一個flag 利用msf下載exp flag2 flag3 Mysql登錄 查看mysql的運行權限 MySql提權&#xff1a;UDF 查看數據庫寫入條件 查看插件目錄 查看是否可以遠程登錄 gcc編譯.o文件 創建so文件 創建臨時監聽…

Podman Desktop:現代輕量容器管理利器(Podman與Docker)

前言 什么是 Podman Desktop&#xff1f; Podman Desktop 是基于 Podman CLI 的圖形化開源容器管理工具&#xff0c;運行在 Windows&#xff08;或 macOS&#xff09;上&#xff0c;默認集成 Fedora Linux&#xff08;WSL 2 環境&#xff09;。它提供與 Docker 類似的使用體驗…

極狐GitLab 權限和角色如何設置?

極狐GitLab 是 GitLab 在中國的發行版&#xff0c;關于中文參考文檔和資料有&#xff1a; 極狐GitLab 中文文檔極狐GitLab 中文論壇極狐GitLab 官網 權限和角色 (BASIC ALL) 將用戶添加到項目或群組時&#xff0c;您可以為他們分配角色。該角色決定他們在極狐GitLab 中可以執…

解鎖現代生活健康密碼,開啟養生新方式

在科技飛速發展的當下&#xff0c;我們享受著便捷生活&#xff0c;卻也面臨諸多健康隱患。想要維持良好狀態&#xff0c;不妨從這些細節入手&#xff0c;解鎖科學養生之道。? 腸道是人體重要的消化器官&#xff0c;也是最大的免疫器官&#xff0c;養護腸道至關重要。日常可多…

Kafka 主題設計與數據接入機制

一、前言&#xff1a;萬物皆流&#xff0c;Kafka 是入口 在構建實時數倉時&#xff0c;Kafka 既是 數據流動的起點&#xff0c;也是后續流處理系統&#xff08;如 Flink&#xff09;賴以為生的數據源。 但“消息進來了” ≠ “你就能處理好了”——不合理的 Topic 設計、接入方…

【繪制圖像輪廓|凸包特征檢測】圖像處理(OpenCV) -part7

15 繪制圖像輪廓 15.1 什么是輪廓 輪廓是一系列相連的點組成的曲線&#xff0c;代表了物體的基本外形。相對于邊緣&#xff0c;輪廓是連續的&#xff0c;邊緣不一定連續&#xff0c;如下圖所示。輪廓是一個閉合的、封閉的形狀。 輪廓的作用&#xff1a; 形狀分析 目標識別 …

uniapp中使用<cover-view>標簽

文章背景&#xff1a; uniapp中遇到了原生組件(canvas)優先級過高覆蓋vant組件 解決辦法&#xff1a; 使用<cover-view>標簽 踩坑&#xff1a; 我想實現的是一個vant組件庫中動作面板的效果&#xff0c;能夠從底部彈出框&#xff0c;讓用戶進行選擇&#xff0c;我直…