UnoCSS

杂草茹

已于 2024-08-28 10:52:19 修改

阅读量752

点赞数 15

文章标签： html5 css

于 2024-08-27 16:53:45 首次发布

本文链接：https://blog.csdn.net/qq_40187274/article/details/141564370

版权

一、介绍

官网 https://unocss.dev/
中文文档 https://unocss-cn.pages.dev/presets/uno
UnoCSS是即时原子CSS引擎，设计为灵活和可扩展。

1.相比较tailwindcss依赖于 PostCSS 的 AST解析，uncss直接使用字符串拼接成css，速度更快，
2.tailwindcss必须把原子类写到 class 里面，unocss更自由，
3.UnoCSS兼容包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等css框架
如：

name	style
ml-3	margin-left: 0.75rem; (Tailwind CSS写法)
mt-10px	margin-top: 10px; （windicss写法）

二、安装：

unocss需要的node版本最低为16.X，最新的0.62版本需要18.X
项目是vite，所以介绍vite的安装。

npm install -D unocss

vite.config.ts中引入UnoCSS

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

创建配置文件uno.config.ts

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

main.ts中添加

// main.ts
import 'virtual:uno.css'

三、配置

1.uno.config配置文件结构

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  presetMini,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss';

export default defineConfig({
  //生成 css 的规则
  rules: [
    // ['ml-1', { 'margin-left': '8px' }],
    [/^ml-(\d+)$/, ([, d]) => ({ 'margin-left': `${parseInt(d) * 8}px` })]
  ],
  //可以合并多个class，也可以使用老的@apply
  shortcuts: {
    'flex-center': 'flex justify-center items-center'
  },
  //Z自定义主题
  theme: {
    colors: {
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)' //class="bg-brand-primary"
      }
    }
  },
  //预设
  presets: [
    presetUno(), //是一个集合，支持 Tailwind CSS, Windi CSS, Bootstrap, Tachyons的写法
    presetAttributify(), //支持属性化写法，比如 class="m-2 text-teal-400"可以直接写成 m-2 text-teal-400
    presetIcons(), //图标，<div class="i-mdi-alarm text-orange-400" /> https://icones.js.org/
    presetTypography(), //排版预设
    presetMini(), //包含与 CSS 属性对齐的最基本的工具类
    presetWebFonts({
      fonts: {
        // ...
      }
    }) //网页字体支持
  ],
  //允许您对现有规则应用一些变化，类似于 Tailwind CSS 中的 hover: 变体
  variants: [
    // hover:
    (matcher) => {
      if (!matcher.startsWith('hover:')) {
        return matcher;
      }
      return {
        // slice `hover:` prefix and passed to the next variants and rules
        matcher: matcher.slice(6),
        selector: (s) => `${s}:hover`
      };
    }
  ],
  //转换源码以支持约定
  //transformerVariantGroup支持前缀合并，比如bg-blue-400 hover:bg-blue-500可以写成 bg="blue-400 hover:blue-500"
  //transformerDirectives,支持@apply指令
  transformers: [transformerDirectives(), transformerVariantGroup()]
});

2.unocss里的预设presets

（1）presetUno 默认预设

提供一种常见的实用程序优先框架的超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等，
例如，ml-3（Tailwind CSS）、ms-2（Bootstrap）、ma4（Tachyons）和 mt-10px（Windi CSS）都是有效的

.ma4 { margin: 1rem; }
.ml-3 { margin-left: 0.75rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.mt-10px { margin-top: 10px; }

（2）presetIcons图标

可以快捷的使用图标，流程为：
首先需要安装看好的图片库，图片库的地址为https://icones.js.org/
使用以下命令安装：

npm install -D @unocss/preset-icons @iconify-json/[你想要的集合]

页面上使用：

<div class="i-mdi-alarm text-orange-400" />

（3）presetAttributify 支持属性化写法

Attributify 模式，可以不放在class内

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white py-2 px-4 border-2 border-blue-200 
	dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>
//可以写成
<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  p="y-2 x-4"
  border="2 blue-200"
>
  Button
</button>

前缀自引用
对于具有与前缀相同的实用程序的实用程序，如 flex、grid、border，提供了一个特殊的 ~ 值。

<button class="border border-red">
  Button
</button>
//可以写成
<button border="~ red">
  Button
</button>

属性冲突
如果属性模式的名称与元素或组件的属性发生冲突，您可以添加 un- 前缀以指定为 UnoCSS 的 attributify 模式。

<a text="red">This conflicts with links' `text` prop</a>
<!-- to -->
<a un-text="red">Text color to red</a>

（4）presetTypography 文字排版

为 UnoCSS 提供了一组文字段落类，可用于向原始 HTML 添加排版默认设置，prose。

<article text-base prose prose-truegray xl="text-xl">
  {{ markdown }}
  <p class="not-prose">
    一些文本
  </p>
</article>

（4）presetWebFonts 字体预设

提供商：
none - 什么也不做，将字体视为系统字体
google - Google Fonts
bunny - 隐私友好的 Google Fonts
fontshare - ITF 的优质字体服务
使用如下：

// uno.config.ts
import { defineConfig } from 'unocss'
import presetWebFonts from '@unocss/preset-web-fonts'
import presetUno from '@unocss/preset-uno'
import axios from 'axios'
import ProxyAgent from 'proxy-agent'

export default defineConfig({
  presets: [
    presetUno(),
    presetWebFonts({
      // 使用 axios 并设置 https 代理
      customFetch: (url: string) => axios.get(url, { httpsAgent: new ProxyAgent('https://localhost:7890') }).then(it => it.data),
      provider: 'google',//这里配置提供商
      fonts: {
        sans: 'Roboto',
        mono: ['Fira Code', 'Fira Mono:400,700'],
      },
    }),
  ],
})

（5）presetMini 基本的工具类

深色模式
此预设生成基于类的深色模式，带有 dark: 变体，和tailwindcss相同。

<div class="dark:bg-red:10" />

CSS @layer
支持 CSS 的原生 @layer ，通过 layer-xx: 变体。

<div class="layer-foo:p4" />
<div class="layer-bar:m4" />

（6）transformerVariantGroup

启用 UnoCSS 的 Windi CSS 变体组功能，支持前缀合并，比如bg-blue-400 hover:bg-blue-500可以写成 bg=“blue-400 hover:blue-500”。
使用如下：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>
可以写成：
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

（7）transformerDirectives

指令相关，比如@apply、@screen
使用如下：

.custom-div {
  @apply text-center my-0 font-medium;
}

（8）Rem to px 预设

可以设置rem和px的转化比例，默认值为1rem=16px;
先安装：

npm install -D @unocss/preset-rem-to-px

配置如下：

// uno.config.ts
import { defineConfig } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
  presets: [
    presetRemToPx({
    	baseFontSize: 16
	}),
    // ...other presets
  ],
})