unocss-preset-vunk

unocss-preset-vunk 是一组面向 UnoCSS 的工具预设，提供间距、字号与 Flex 布局相关的快捷规则，适合在 Vue / Vite 项目中配合 UnoCSS 使用。

安装

pnpm add unocss-preset-vunk unocss

使用

在 uno.config.ts 或 uno.config.js 中引入需要的 preset：

import { defineConfig, presetAttributify, presetWind } from 'unocss'
import { presetFlex, presetFont, presetGap } from 'unocss-preset-vunk'

export default defineConfig({
  presets: [
    presetAttributify(),
    presetWind(),

    // 间距与内外边距
    presetGap({
      prefix: 'g',
    }),

    // 字号
    presetFont(),

    // Flex 布局
    presetFlex({
      prefix: 'vk',
    }),
  ],
})

presetGap

用于快速生成 margin、padding 相关规则，支持主题变量与自定义前缀。

注意：prefix 会直接拼接到缩写前，不加额外分隔符。例如 prefix: 'g' 时，mt-m 写作 gmt-m，pa-m 写作 gpa-m。

基础配置

presetGap({
  prefix: 'g',
})

示例

<div class="gmt-m gmb-s gplr-l">
  <p class="gps-m gpe-m">内容</p>
</div>

会生成类似：

.gmt-m { margin-top: var(--gap-m); }
.gmb-s { margin-bottom: var(--gap-s); }
.gplr-l { padding-left: var(--gap-l); padding-right: var(--gap-l); }
.gps-m { padding-inline-start: var(--gap-m); }
.gpe-m { padding-inline-end: var(--gap-m); }

默认主题变量

:root {
  --gap-xs: .8rem;
  --gap-s: .9rem;
  --gap-m: 1rem;
  --gap-l: 1.1rem;
  --gap-xl: 1.2rem;
}

可用缩写

| 类型 | 缩写 | CSS 属性 | | --- | --- | --- | | margin | ml, mr, mt, mb, ma | margin-left, margin-right, margin-top, margin-bottom, margin | | margin inline | ms, me, mse | margin-inline-start, margin-inline-end | | margin 双向 | mtb, mlr | margin-top/bottom, margin-left/right | | padding | pl, pr, pt, pb, pa | padding-left, padding-right, padding-top, padding-bottom, padding | | padding inline | ps, pe, pse | padding-inline-start, padding-inline-end | | padding 双向 | ptb, plr | padding-top/bottom, padding-left/right |

自定义主题

presetGap({
  prefix: 'g',
  theme: {
    xs: '4px',
    s: '8px',
    m: '12px',
    l: '16px',
    xl: '24px',
  },
})

子元素间距

presetGap 提供 sub- / sub: variant，用于给当前元素的所有相邻子元素添加间距：

<div class="sub-gmt-m">
  <p>Item 1</p>
  <p>Item 2</p>
</div>

presetFont

用于快速生成字号规则，支持主题变量与直接 em/rem 写法。

示例

<p class="f-m">默认字号</p>
<p class="f-xl">大字号</p>
<p class="f-2">2em</p>
<p class="f-1.5r">1.5rem</p>

默认主题变量

:root {
  --f-xs: .8rem;
  --f-s: .9rem;
  --f-m: 1rem;
  --f-l: 1.1rem;
  --f-xl: 1.2rem;
}

自定义主题

presetFont({
  theme: {
    xs: '12px',
    s: '14px',
    m: '16px',
    l: '18px',
    xl: '20px',
  },
})

presetFlex

用于快速生成 Flex 布局规则。默认前缀为 vk，可通过 prefix 配置修改。

示例

<div class="vk-flex vk-flex-row-between-center">
  <span>Left</span>
  <span>Right</span>
</div>

等价于：

.vk-flex-row-between-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

规则说明

Flex 规则分为三段：方向-主轴-副轴。

| 位置 | 说明 | 可选值 | | --- | --- | --- | | ① 方向 | flex-direction | row, rowr, col, colr | | ② 主轴布局 | justify-content | start, center, between, around, evenly, end | | ③ 副轴布局 | align-items | start, center, between, around, evenly, end, baseline |

简写

<div class="vk-flex">仅 display: flex</div>
<div class="vk-flex-row">flex-direction: row</div>
<div class="vk-flex-row-center">justify-content: center</div>
<div class="vk-flex-row_center">align-items: center</div>
<div class="vk-flex-row-center2">justify-content 与 align-items 都为 center</div>
<div class="vk-flex-col-between-center">column + space-between + center</div>

单独导入

如果只需要某个 preset，也可以使用子路径导入：

import { presetFlex } from 'unocss-preset-vunk/flex'
import { presetFont } from 'unocss-preset-vunk/font'
import { presetGap } from 'unocss-preset-vunk/gap'

开发

pnpm run lib

发布

pnpm run lib:publish