手写scss原子类可替代tailwind，适用于微型项目；通过@for/@each生成间距、方向类，配合$spacing-unit变量统一控制，避免命名模糊与构建冗余，兼顾性能与可控性。
直接上手就能用，不需要引入 Tailwind，也能获得接近的开发体验——关键不是“模仿类名”，而是复用它的设计逻辑和生成机制。
为什么不用 Tailwind 而要手写原子类
项目太小、构建链路轻量（比如纯 Vite + SCSS 的静态站点），或已有成熟 SCSS 工程但不想引入 PostCSS 插件和 JIT 编译器。Tailwind 的 content 扫描、PurgeCSS、@tailwindcss/vite 等机制在微型项目里反而增加维护成本。而 SCSS 本身支持循环、变量、条件、嵌套，完全能胜任原子类批量生成任务。
常见错误现象：npm run build 后样式丢失，或开发时热更新慢——本质是误把 SCSS 当作“写一遍 CSS”的工具，没利用好 @for 和 @each 的编译期能力。
- SCSS 原子类在编译时一次性输出，无运行时开销，也不依赖 HTML 扫描
- 所有类名、数值、方向组合都由你控制，不会出现 Tailwind 默认的
space-y-4这类语义模糊的命名 - 可与现有
$theme变量无缝对接，比如$spacing-unit: 0.25rem一改，全部m-1到m-12自动重算
用 @for 生成基础间距类（m-*, p-*）
Tailwind 的 m-1 对应 0.25rem，这个映射关系必须提前定义清楚，否则后续响应式、负值、方向组合都会错乱。
实操建议：
- 先定义统一单位：
$spacing-unit: 0.25rem，避免硬编码数字 - 用
@for $i from 1 through 12控制粒度，12 是经验值（对应 0–3rem，每 0.25rem 一档） - 负边距必须显式写
.-m-#{$i}，不能靠margin: -$i * $spacing-unit—— SCSS 不支持负数插值运算，会报错Invalid CSS after "...": expected expression
示例片段：
$spacing-unit: 0.25rem;
@for $i from 1 through 12 {
.m-#{$i} { margin: $i * $spacing-unit; }
.-m-#{$i} { margin: $i * $spacing-unit * -1; }
.p-#{$i} { padding: $i * $spacing-unit; }
.-p-#{$i} { padding: $i * $spacing-unit * -1; }
}
用 @each 和方向映射表生成 mt-*, mx-* 等组合类
硬写 16 个 @for 循环太重复，也难维护。更合理的方式是抽象出方向配置，再用 @each 驱动生成。
使用场景：需要扩展 ml-*、mb-*，或未来加 gap-*、inset-* 时，只需改映射表，不碰逻辑。
参数差异：
-
margin支持auto，但padding不支持，生成时得过滤掉auto分支 -
inset类需同时作用于top/right/bottom/left，不能简单套用margin的方向键名 - 某些项目禁用负边距，那就跳过
.-m-*系列，只保留正向
示例方向映射：
$directions: (
't': 'top',
'b': 'bottom',
'l': 'left',
'r': 'right',
'x': 'left right',
'y': 'top bottom'
);
<p>@each $short, $full in $directions {
@for $i from 1 through 12 {
.m#{$short}-#{$i} { margin-#{$full}: $i <em> $spacing-unit; }
.-m#{$short}-#{$i} { margin-#{$full}: $i </em> $spacing-unit * -1; }
}
}</p>
如何避免类名爆炸和 CSS 体积失控
生成 672 个类（12×方向×正负×内外边距）看起来吓人，但实际影响远小于想象——SCSS 编译后只是普通 CSS，gzip 压缩率极高，且现代浏览器对长选择器列表处理效率很好。
真正容易被忽略的点：
- 不要在
@for外层套@media，否则每个断点都复制一遍全部原子类，体积翻 N 倍；正确做法是用@screen或单独写响应式原子（如sm:m-2）再@include - 删除未使用类只能靠构建时 Tree-shaking，SCSS 本身不提供此能力；若真有大量未用类，说明设计系统没收敛，该砍的是业务组件抽象层级，不是原子类数量
- 如果项目已用
@use 'sass:math'，可用math.div($i, 4)实现px到rem换算，但多数场景直接用0.25rem更直观
复杂点在于：原子类不是终点，而是起点。你得紧接着定义 text-xs/font-bold 这类文本类，再配 bg-gray-100 这样的颜色类——它们之间没有耦合，但组合时语义容易断裂。这时候，SCSS 的 @mixin 就比 Tailwind 的 @layer 更可控：你可以写一个 @mixin card-base，内部调用 .p-4、.rounded-lg、.shadow-sm，既保持原子性，又约束组合逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
