UnoCSS使用指南

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

看的一脸懵逼是不是，刚开始俺也一样。
第一次见还是在大佬代码里看到的，一堆text-14px c-flex类似的类。以为是自己定义的属性，全局搜了下发现是使用了UnoCSS。

安装

npm i -D unocss @unocss/webpack @unocss/cli

@unocss/webpack用于webpack项目可以使用unocss。
@unocss/cli则是unocss的脚手架，可以实现监听文件实时增减对应的class。

使用

以下示例代码均基于vue3.x ＋ webpack

首先在package.json新增脚本

// package.json
  "scripts": {
    "unocss": "unocss \"src/**/*.vue\" -w -m false -o src/common/css/unocss.css"
  },

在main.js中引入

// main.js
import '@/common/css/unocss.css';

在项目根目录下创建文件unocss.config.js

// unocss.config.js
import { defineConfig, presetUno, transformerVariantGroup } from "unocss";
export default defineConfig({
  // 给unocss的class加命名空间，当匹配到c-开头的class时自动进行处理
  preprocess(matcher) {
    return matcher.startsWith("c-") ? matcher.slice(2) : undefined;
  },
  // 预设(preset)可以被看作是一组插件或options配置的可共享模块。
  presets: [
    // 此预设提供Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等class
    presetUno(),
  ],
  // transformerVariantGroup可以实现class="hover:bg-gray-400"类似的写法
  transformers: [transformerVariantGroup()],
  // 组合class，如果使用c-btn类则会应用如下的class样式
  shortcuts: [
    {
      btn: "box-border block w-220px p:w-280px mx-auto bg-brand/100 leading-20px py-12px text-center text-white/100 overflow-hidden rounded-36px transition-colors",
    },
  ],
  // 自定义一些规则
  rules: [["bg-full", { "background-size": "100% 100%" }]],
  theme: {
    // 断点，用来实现响应式布局
    // 屏幕宽度>=0是应用c-xs-xxx的class，>=320时应用c-sm-xxx的class。(ps:样式将会被覆盖而不是合并)
    breakpoints: {
      xs: "0px",
      sm: "320px",
      md: "640px",
    },
    // 给颜色设置别名
    colors: {
      // 如c-text-brand则会应用color:#2D40E9
      dark: "#000000",
      brand: "#2D40E9",
    },
  },
});