间距系统生成器

工具介绍

间距系统生成器可以根据你设置的基础单位和倍数，自动生成符合设计规范的间距阶梯，并输出多种前端开发常用格式，帮助你在项目中统一使用一致的间距规范。

使用方法

1. 输入基础单位，通常设计中常用 4px 或 8px 作为基础单位
2. 设置你需要生成的最大倍数
3. 选择是否需要包含奇数倍间距（比如 1倍=4px，2倍=8px...）
4. 点击生成间距系统，即可得到间距表、CSS 自定义属性、Sass 变量和 Tailwind 配置

计算原理

间距系统的计算原理非常简单：
每个间距值 = 基础单位 × 倍数

例如：基础单位为 4px，包含奇数倍，最大 16倍，生成结果为：
4×1=4px，4×2=8px，4×3=12px ... 4×16=64px

输出格式说明

• CSS 自定义属性：可直接复制到 CSS 根变量中使用，如 var(--spacing-4)
• Sass 变量：可直接在 Sass/SCSS 项目中使用，如 margin: $spacing-4
• Tailwind 配置：可直接复制到你的 Tailwind 配置文件中，即可使用 m-4 这类类名