unocss使用指南

[jiangjiu]

介绍

Unocss是一个具有高性能且极具灵活性的即时原子化 CSS 引擎。可以通过预设等配置达到和 Tailwind/Windi 等原子化框架相同的行为。此外，uno具有性能更好，更灵活等优势，参考原子化CSS框架对比
在使用unocss来写原子化css之前，除了阅读unocss文档，同时建议阅读tailwindcss或windicss的文档，因为这两个框架文档更完善，从中能学习到原子化css的更多知识。
📖【unocss】Github Readme 📖【unocss】重新构想原子化 CSS 📖【tailwindcss】官方文档 📖【windicss】官方文档

目标

基础目标：

• 将项目中适合原子化的样式切换为原子化类名，不适合原子化的保留原来的class+style写法。初步实践对项目常用css改写原子化输出了规范。css属性原子化规范
  进阶目标：
• 对项目中常用的样式组合做抽象，通过unocss提供的shortcuts及rules等功能自定义规则，简化原子化类名的书写，这些规则需要结合实际项目进行积累。

开发前准备

插件

vscode编译器提供了unocss的提示插件，安装后鼠标悬停在类名上会展示编译后的css代码。

但是，目前unocss插件还不支持预设类名的自动补全，按照这个issue讨论的方法，可以在项目中添加tailwind.config.js配置文件，再安装tailwindcss的插件，可以蹭一下tailwindcss的自动补全提示（因为unocss提供的预设是Tailwind / Windi CSS 的超集，所以一开始不熟悉预设类名有哪些时，可以去这俩框架的文档中查找并使用）。

tailwind.config.js这个配置文件是为了开发更便捷，与项目配置并无关系，目前没有加入到脚手架中，如果有需要可以自行引入。

配置文件

import {
    defineConfig,
    presetUno,
    presetAttributify,
} from 'unocss';
import transformerVariantGroup from '@unocss/transformer-variant-group';
import transformerCompileClass from '@unocss/transformer-compile-class';

export default defineConfig({
    presets: [
        presetAttributify(), // 启用属性化模式
        presetUno(), // 启用常见框架的预设
    ],
    transformers: [
        transformerVariantGroup(), // 启用变体组合
        transformerCompileClass(), // 启用类名压缩
    ],
    // 主题扩展
    theme: {
        fontFamily: { // 把用到的fontFamily放这里
            'Barlow': 'Barlow Bold',
            'FZLTCHJW': 'FZLTCHJW',
        },
        colors: {
            'yellow': {
                light: '#fffbd3',
                DEFAULT: '#fffacd',
            },
        },
    },
    // 自定义层级顺序
    layers: {
        'my-layer': 10,
        default: 1,
        'rules': -10,
        'shortcuts': -20,
    },
    // 自定义规则
    rules: [
        // 静态规则
        ['r-bg-red', { background: '#ff0000' }],
        // 动态规则
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` }), {layer: 'my-layer'}],
    ],
    // 快捷样式组合
    shortcuts: [
        // 静态别名
        {
            'bg-common': 'bg-[length:100%] bg-no-repeat',
            'flex-center': 'flex justify-center items-center',
            'translate-center': 'left-50% top-50% translate--50%',
        },
        // dynamic shortcuts
        [/^text-gradient-to-(.*)$/, ([, c]) => `bg-gradient-to-${c} bg-clip-text text-transparent`],
    ],
});

配置项介绍

theme

通过配置可以扩展主题，你可以在配置中制定主题属性，制定的属性将被合并到默认主题中。
常见的width、height、colors、fontSize等均支持扩展主题(不是所有属性都支持，例如backgrounfSize不支持)，更多主题属性参见文档：主题属性文档
theme: {
// ...
colors: {
'veryCool': '#0000ff', // 新增一个颜色 text-veryCool bg-veryCool 都可以应用该颜色
'red': {
500: '#fd9000', // 覆盖默认red-500的颜色
}
},
}
⚠️注意 不是所有属性都支持扩展主题，例如backgrounfSize就不支持。所以实现background-size: 100% 需要[]。即: bg-[length:100%]

rules

尽管预设提供了大部分常见的基础实用类名，但并不能满足更多复杂的样式和需求，可以使用rules自定义更多实用类名规则，简化css的使用。

• 相同layer的rule，后定义的优先级高，与使用时的顺序无关。

  • 例如：定义了my-bg-blue和my-bg-red，当这俩规则同时应用在一个元素上展示为红色。
    rules: [
    //
    静态规则
    ['my-bg-blue', { background: '#007fff' }],
    ['my-bg-red', { background: '#ff0000' }],

    // 动态规则
    // 自定义1/4margin值
    [/^m-(\d+)$/, ([, d]) => ({ margin: ${d / 4}rem }), {layer: 'my-layer'}], // 自定义层级，若不声明layer默认值为'default'
    ]

shortcuts

将复用度很高的实用类名进行组合，通过快捷别名进行使用。

• 快捷别名会生成额外的css，滥用会导致体积增大，建议复用度很高的组合才使用缩写。
• 相同layer的shortcut，优先级是按缩写字符的Unicode编码排序的，与定义顺序、使用顺序都无关。
  • 例如：一个元素同时应用 my-text-1 和 my-text-2 时，my-text-2的属性优先级高。
    shortcuts: [
    // 静态shortcuts
    {
    'my-text-2': 'bg-blue-500 text-#fff',
    'my-text-1': 'bg-green-500 text-#000',
    },
    ['flex-center', 'flex justify-center items-center', { layer: 'my-layer' }], // 自定义层级，若不声明layer默认值为'shortcuts'
    // 动态shortcuts
    [/^text-gradient-to-(.*)$/, ([, c]) => bg-gradient-to-${c} bg-clip-text text-transparent],
    ]

layers

css生成顺序会影响其生效优先级，通过layer控制层级顺序。

• 预设实用类名的layer为'default'
• rules的layer默认值为'default'
• shortcuts的layer默认值为'shortcuts'
  通过如下方式控制各层级顺序：
  layers: {
  components: -1,
  default: 1,
  utilities: 2,
  'my-layer': 3,
  }

Rules Merging

unocss会将同一层级，相同内容的类名合并生成，以减小css体积。

各种css优先级

!important > 内联样式 > 内部样式表 > 导入样式表 > unocss
若不自定义layer，unocss中各项优先级为：rules > 预设实用类名(utilities) > shortcuts

[lmq352489099]

各种css优先级
!important > 内联样式 > 内部样式表 > 导入样式表 > unocss

这个优先级是在哪里设置的,还是内部就是默认这样子了