直接用@for和@each配合映射表可生成原子类，但须手动控制前缀、单位与命名一致性；核心是组合方向、属性、数值三者，键必须为字符串，类名需@at-root提升作用域，前缀如u-需显式拼接，避免冗余类与单位混用。
直接用 @for 和 @each 配合映射表就能生成可用的原子类，不需要引入任何构建工具或框架——但必须手动控制前缀、单位、命名一致性，否则生成的类在项目里会冲突或难以维护。
怎么用 SCSS 循环生成 margin/padding 类
核心是把方向、属性、数值三者组合，避免硬编码每个类。常见错误是把 px 写死在循环里，导致无法适配 rem/em；或者用数字键名（如 1）而非字符串（如 "1"），让 Sass 把 mt-1 编译成 mt-1.0。
-
$spacing-map: ("1": 0.25rem, "2": 0.5rem, "3": 1rem)—— 键必须是字符串，否则@each中的$key类型不一致 -
$directions: ("t": "top", "b": "bottom", "l": "left", "r": "right", "x": "left right", "y": "top bottom")—— 支持复合方向，但需用@if分支处理 - 生成类名时用
.#{$prop}#{$dir}-#{$size}，例如mt-2对应margin-top: 0.5rem - 别漏掉
@at-root：否则嵌套在某个父级下会变成.container .mt-2，失去原子性
为什么加命名空间前缀不能靠 @layer
@layer utilities 只管输出顺序和层叠权重，它不会改选择器文本。想让所有类变成 u-mt-2 而不是 mt-2，必须在拼接类名时就把前缀塞进去，且所有规则都得用 @at-root 提升作用域。
- 错误写法：
@layer utilities { .mt-2 { margin-top: 0.5rem; } }→ 输出仍是.mt-2 - 正确写法：
@at-root .u-mt-2 { margin-top: 0.5rem; }或用函数拼接：.#{ns-class("u", "mt", $spacing-map)}-2 - 前缀长度要克制：推荐
u-或t-，太长如utility-margin-top-会让 HTML 显得臃肿
如何避免生成冗余或不可用的类
自动生成容易“贪多”，比如把 ml-999 也吐出来，但实际项目根本用不到；或者为每个像素值都建一个类（mt-1 到 mt-200），体积暴涨且无意义。
- 限制数值范围：
@for $i from 1 through 12比through 100更合理，配合$step: 0.25就能覆盖常用 rem 值 - 禁用带单位的类名：
mt-16px不如mt-4（对应1rem），前者换单位就得全量替换，后者只需改映射表 - 不生成伪类变体：
u-hover-bg-blue违反原子类“静态声明”原则，交互态该由 JS 控制或单独 modifier 类承担 - 颜色类用编号不用语义名：
u-text-gray-700比u-text-brand-primary更稳定，换主题时只改变量定义，不改 HTML
真正麻烦的不是生成类，而是让团队遵守同一套缩写逻辑和数值映射——比如 u-p-4 到底是 1rem 还是 16px，这个约定一旦写进文档，就得所有人严格执行，否则生成的 CSS 和 HTML 就对不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
