原子化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 {}
}