必须先定义结构清晰的$spacings和$spacing-directions映射，再用双层@each嵌套遍历生成mt-、pt-等类；单位需统一为rem等合法CSS长度，缩写须语义准确（如mt对应margin-top），避免硬编码数字范围或字符串拼接，响应式需用真实@media包裹，!important应作为声明修饰符条件启用。
用 @each 遍历映射生成 mt-*、pt-* 类时，单位和缩写必须对齐
直接写 @each $key, $value in $spacings 是最常用方式，但容易漏掉两件事：一是单位没统一（比如 $value 是 1rem，但类名里写成 mt-1），二是缩写语义错位（margin-top 对应 mt 没问题，但 padding-inline-start 写成 ps 就让人困惑）。建议先定义清晰的映射结构：
$spacings: ( '0': 0, '1': 0.25rem, '2': 0.5rem, '4': 1rem, '8': 2rem );
再配一组方向映射，避免硬编码字符串拼接：
$spacing-directions: ( 'mt': 'margin-top', 'mb': 'margin-bottom', 'ml': 'margin-left', 'mr': 'margin-right', 'pt': 'padding-top', 'pb': 'padding-bottom', 'pl': 'padding-left', 'pr': 'padding-right' );
这样后续循环才可控，不会生成一堆意义模糊的类（比如 ms-2 是 margin-start 还是 margin-side？）。
别在 @for 中硬写数字范围，用 map-keys($spacings) 动态取键
写 @for $i from 0 through 8 看似省事，实际会污染输出：你可能只定义了 '0'、'1'、'4' 三个间距值，但循环仍会产出 mt-2、mt-3 等无对应样式的空类。正确做法是让循环完全依赖数据源：
@each $key, $value in $spacings {
@each $prefix, $property in $spacing-directions {
.#{$prefix}-#{$key} {
#{$property}: $value;
}
}
}
这样生成的每个类都有明确的样式支撑，也方便后期删减某个间距档位——只要从 $spacings 里移除键值对，相关类就自动消失。
响应式变体要绑定断点变量，而不是在循环里写死 md: 或 lg:
很多人直接在类名里拼 md:mt-4，结果发现媒体查询没生效。根本原因是 Tailwind 那套是靠 JS 运行时解析的，Sass 编译期无法识别这种语法。真要做响应式原子类，得用真正的媒体查询包裹：
$breakpoints: (
'sm': (min-width: 320px),
'md': (min-width: 768px),
'lg': (min-width: 1024px)
);
@each $bp-name, $bp-value in $breakpoints {
@media #{$bp-value} {
@each $key, $value in $spacings {
@each $prefix, $property in $spacing-directions {
.#{$bp-name}-#{$prefix}-#{$key} {
#{$property}: $value;
}
}
}
}
}
注意：.md-mt-4 这种写法只是命名约定，真正起作用的是媒体查询块内的 CSS 规则。如果项目用的是 PostCSS + autoprefixer，记得确认它能处理嵌套媒体查询输出。
生成 !important 版本时，别用字符串拼接 !important，用 !important 标志符
错误写法：#{$property}: #{$value} !important; —— Sass 会把它当普通字符串，编译后变成 margin-top: 1rem !important; 看似正常，但某些构建工具（如 vite-plugin-sass）会因语法解析异常丢弃整个声明。正确写法是把 !important 当作声明修饰符：
.#{$prefix}-#{$key}-important {
#{$property}: $value !important;
}
另外，!important 类不该泛滥。建议只对极少数需要覆盖第三方样式（如 iframe 内嵌组件）的场景启用，且通过单独开关变量控制是否生成：
-
$enable-important-variants: false默认关掉 - 只在真正需要的地方
@if $enable-important-variants条件编译
否则很容易在 CSS 文件末尾堆出几百个带 !important 的规则，后期调试时根本分不清优先级来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
