原子化CSS：Unocss的使用

一、什么是原子化 CSS?

首先，让我们为原子化 CSS (Atomic CSS) 给出适当的定义：

John Polacek 在文章《 Let’s Define Exactly What Atomic CSS is 》中写道：

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

译文：

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

有些人可能会称其为函数式 CSS，或者 CSS 实用工具。本质上，你可以将原子化的 CSS 框架理解为这类 CSS 的统称：

.m-0 {
  margin: 0;
}
.text-red {
  color: red;
}

市面上有不少实用至上的 CSS 框架，如 Tailwind CSS，Windi CSS 以及 Tachyons 等。

二、应用示例

1.安装依赖

yarn add -D unocss

2.配置插件

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 第一步：引入Unocss
import Unocss from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 第二步：使用Unocss
    Unocss({
    	// 可选：按需自定义规则
	    rules: [
            [/^m-(\d+)$/, ([, d]) => ({ margin: `${d}px` })],
            [/^p-(\d+)$/, ([, d]) => ({ padding: `${d}px`})],
            [/^w-(\d+)$/, ([, d]) => ({ width: `${d}px`})]
        ]
    })
  ]
})

// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'uno.css' // 引入uno.css

createApp(App).mount('#app')

3.开始使用Unocss

<script setup></script>

<template>
  <button class="bg-cyan w-100 m-10 p-10">这是个按钮</button>
</template>

<style scoped></style>

效果如下：

在这里插入图片描述

4.自定义规则说明

Unocss的rules规则配置可以有以下方式：
（1）静态规则

rules: [ ['m-10px', { margin: '0 10px' }] ]

对应于：

 .m-10px { margin: 0 10px; }

（2）使用正则匹配动态规则

rules: [ [/^m-(\d+)px$/, ([, d]) => ({ margin: `0 ${d}px`})], ]

对应于：

.m-20px { margin: 0 20px; }

5.shortcuts 进一步封装的工具类

当你经常使用相同的工具类合集时，出现重复性是常见的，shortcuts 特性允许你把工具类的名字组合在一起，在你应用程序的任何地方使用，而不需要重复写。

shortcuts: [
 // 动态 shortcuts
  [/^badge-(.*)$/, ([, c], { theme }) => {
    if (Object.keys(theme.colors).includes(c))
      return `bg-${c}4:10 text-${c}5 rounded`
  }]
]

6.Variants变体

Variants允许您对现有规则应用一些变体，类似Tailwind中的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`,
    }
  }
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

matcher：如果返回值是一个字符串，它将被用作匹配规则的选择器。
selector：自定义生成的CSS选择器。
在这里插入图片描述

7.属性化模式

通过引入 presetAttributify 预设可以使用属性化模式，该模式可以增加一串原子化 CSS 书写时的可读性

import { presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify({ /* preset options */ }),
    // ...
  ],
})

 <div
    class="bg-green-200 hover: bg-green-300 text-blue text-sm font-14 font-light
border-2 border-black-200 dark:bg-green-400 dark:hover:bg-green-500"
>属性化模式</div>

使用属性化模式可以改写为：

<div
    bg="green-200 hover:green-300 dark:green-400 dark:hover:green-500"
    text="blue sm"
    font="14 light"
    border="2 black-200"
>属性化模式</div>

需要注意的是，这样写会出现 ts 类型报错，需要使用声明文件解决：

// shims.d.ts
import type {AttributifyAttributes} from '@unocss/preset-attributify';
declare module 'vue' {
    interface HTMLAttributes<T> extends AttributifyAttributes {}
}