根本原因是@each变量名与列表结构不匹配：一维列表需单变量遍历，二维列表须元组解构；共享尺寸配置应定义映射表并用函数生成前缀类；响应式需先循环断点再嵌套遍历尺寸；删减聚焦高频组合、剔除冗余负值/字体层级，并防范样式冲突。
用 @each 遍历列表生成原子类时，为什么 class 名和属性值总对不上？
根本原因是 @each 中变量名与列表项结构不匹配。Sass 列表可以是一维（如 (10px, 20px, 30px)）或二维（如 ((p, 10), (m, 20))），但很多人直接写 @each $key, $val in $list 却传入一维列表，导致编译报错 "$list" is not a map 或静默跳过。
实操建议：
- 一维列表（仅值）用单变量：
@each $size in $sizes { .p-#{$size} { padding: $size; } } - 二维列表（键值对）必须用元组解构：
@each $prefix, $value in $spacings { .#{$prefix}-#{$value} { #{$prefix}: #{$value}; } } - 若列表含单位（如
10px），别在 CSS 声明里再加单位，否则变成padding: 10px px
怎么让 margin 和 padding 共享同一套尺寸配置但生成不同 class 前缀？
硬编码两套列表重复又难维护。正确做法是定义一份基础尺寸映射（$space-scale），再用函数动态生成带前缀的规则集。
示例（Sass）：
立即学习“前端免费学习笔记（深入）”；
$space-scale: (xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px);
@function make-spacer-classes($prop, $prefix) {
@each $key, $val in $space-scale {
.#{$prefix}-#{$key} {
#{$prop}: $val;
}
}
}
@include make-spacer-classes(margin, m);
@include make-spacer-classes(padding, p);
注意：#{$prop} 是合法的 Sass 插值，但不能用于属性名动态拼接（如 #{m}argin 不行），必须是完整属性名。
生成响应式原子类（如 md:p-4）时，@media 查询嵌套为何没生效？
因为 @each 在编译期展开，而媒体查询需在 CSS 层级嵌套。常见错误是把 @media 写在循环外部，导致所有 class 都被包裹进同一个断点里。
正确结构是：先循环断点，再循环尺寸，在内层生成具体 class：
$breakpoints: (sm: 640px, md: 768px, lg: 1024px);
$spacings: (2: 0.5rem, 4: 1rem, 8: 2rem);
@each $bp-name, $bp-width in $breakpoints {
@media (min-width: $bp-width) {
@each $class-suffix, $value in $spacings {
.#{$bp-name}:p-#{$class-suffix} {
padding: $value;
}
.#{$bp-name}:m-#{$class-suffix} {
margin: $value;
}
}
}
}
关键点：Sass 编译后，.md:p-4 是一个完整 class 名，不是嵌套选择器；CSS 运行时它独立生效，不依赖父级 media 规则——所以必须确保生成的 class 名符合预期，且未被其他样式意外覆盖。
大量原子类导致 CSS 体积暴涨，哪些地方能安全删减？
不是所有组合都需要。比如 pt-0 和 pb-0 可以合并为 py-0，ml-auto 和 mr-auto 通常只需 mx-auto。真正该保留的是高频、不可预测的组合。
可删减方向：
- 负边距（
-m*）只保留常用值（如-2,-4），避免全量生成 - 字体大小类（
text-xs~text-2xl）按设计系统实际用到的层级切，别照搬 Tailwind 的 6 级 - 禁用
!important版本（如p-4!），改用更明确的 CSS 优先级控制 - 用
postcss-clean或构建时 purge 功能剔除未使用的原子类（需配合标记或扫描 HTML）
最易被忽略的是：生成工具类后，没检查是否与现有组件样式冲突。比如全局 .btn { padding: 0.5rem 1rem; } 和原子类 .p-4 同时作用于按钮，结果取决于 CSS 源码顺序——这种隐性依赖，比生成逻辑本身更难调试。
