scss中map的key不能直接用负数，需用字符串包裹如"-1"；否则解析失败。正确写法：$spacers: ("-1": -0.25rem, "-2": -0.5rem)；类名拼接时会生成.mt--1，可用if逻辑避免双短横。
SCSS循环里直接写负数键名会触发语法错误
SCSS 的 @each 遍历 map 时，key 必须是合法的 Sass 标识符。如果你写 $spacers: (-1: 0.25rem, -2: 0.5rem)，Sass 会把 -1 解析为“负号 + 数字字面量”，而非字符串 key，导致编译失败：「Invalid CSS after "...": expected "{", was ":"」。
常见错误写法：
$spacers: (-1: 0.25rem, -2: 0.5rem); // ❌ 编译报错
@each $size-key, $size-val in $spacers { ... }
正确做法是统一用字符串键名，显式包裹负值：
$spacers: ("-1": -0.25rem, "-2": -0.5rem, "0": 0, "1": 0.25rem)- 类名拼接时保留负号：
.mt-#{$size-key}→ 生成.mt--1（注意双短横） - 若想避免
--，可加逻辑转换：.mt#{if($size-key 不推荐——易读性差，且 <code>$size-key此时已是字符串，不能直接做数值比较
生成 .mt--1 这类类名后，HTML 中怎么用才不报错
类名含双短横（如 mt--1）本身是合法 CSS 标识符，但容易被误读或在 JS 中取 class 名时出错（比如 el.classList.contains("mt--1") 没问题，但 el.className.split(" ").includes("mt--1") 可能因空格处理异常漏匹配）。
更实际的问题是语义混淆和维护成本：
- 开发者看到
mt--1容易误以为是 typo，不敢用 - PurgeCSS 默认不识别带双短横的类名，需手动配置
rejected: [/^mt--\d+$/]白名单，否则被误删 - 建议用语义化前缀替代纯负数：
mt-neg1、mt-off-1或mt-shift-1，既合法又自解释
为什么用 @for 生成负 margin 类更容易踩坑
@for $i from -4 through 4 看似简洁，但存在三个隐藏风险：
- 生成
.mt--4到.mt-4，中间夹着.mt-0，而0和-0在 Sass 中等价，@for会跳过重复 key，导致输出缺失 - 单位混用：若循环中写
#{$i}px，$i是负数时变成-2px，但若某处误写成#{$i}rem，负 rem 值虽合法，却可能被 PostCSS 插件（如 autoprefixer）静默丢弃 - 无法按需控制方向组合：比如你只想为 top/bottom 提供负值，但
@for+@each $dir会无差别生成所有mt--2、mb--2、mx--2，其中mx--2在 flex 容器中行为不稳定（Chrome/Safari 解析不一致）
负 margin 工具类上线后，为什么 DevTools 里看不到效果
不是 SCSS 编译问题，而是 CSS 层叠或布局上下文压制了负值表现：
- 父容器触发了 BFC（如
overflow: hidden或display: flow-root），导致子元素的负 margin 被截断，视觉上“没动” - 兄弟元素是 inline-block，默认有换行间隙，你设
margin-right: -4px刚好抵消间隙，但若字体大小变化，间隙值浮动，负 margin 就失效 - 目标元素本身有
display: grid或flex，此时 margin 负值仍生效，但会被 justify-content/align-items 覆盖，优先级更低 - 最隐蔽的情况：该元素被其他规则设了
margin: 0 !important，负值再大也顶不过!important
调试时先在 DevTools 中禁用所有其他 margin 相关规则，再单独开 mt--2，确认是否真无效——很多时候不是没生效，是被别的样式盖住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
