直接写 margin: 16px 危险，因缺乏语义、难维护、不响应；应使用语义化 SCSS 变量（如 $space-md: 16px）和 mixin 封装，并通过断点感知变量或 map 函数实现响应式，确保全局一致性。
为什么直接写 margin: 16px 是危险的
不是所有 16px 都代表同一个设计意图。它可能是「卡片内边距」，也可能是「按钮和文字之间的垂直空隙」，还可能是「模态框标题与内容的分隔距离」。一旦设计调整间距规则，你得全局搜索、逐个判断、手动替换——漏掉一个就导致视觉不一致。更糟的是，16px 在深色模式下可能需要缩放到 14px，但硬编码根本没法响应式切换。
用 SCSS 变量定义语义化间距层级
别按像素值命名变量（如 $space-16），而要按用途和相对关系命名。一套最小可行系统只需覆盖常见场景：
-
$space-xs: 4px—— 图标与文字间微调、小标签内边距 -
$space-sm: 8px—— 表单项控件间距、行内元素间隔 -
$space-md: 16px—— 卡片内边距、段落间距、主操作区垂直留白 -
$space-lg: 24px—— 模块之间分隔、大标题与正文距离 -
$space-xl: 40px—— 页面级区块分割、深呼吸式留白
这些值不是随意定的，而是基于 4px 基数倍增，方便设计师对齐栅格、开发者快速估算。若项目用 8px 基数（如 Material Design），则统一改为 $space-sm: 8px、$space-md: 16px 等，保持比例不变。
避免在选择器里重复写 margin / padding 值
直接调用变量只是第一步。真正减少重复的关键是封装工具类或 mixin：
立即学习“前端免费学习笔记（深入）”；
@mixin pad($size) {
padding: $size;
}
@mixin pad-x($size) {
padding-left: $size;
padding-right: $size;
}
@mixin mar-b($size) {
margin-bottom: $size;
}
这样写：@include mar-b($space-md)，比 margin-bottom: 16px 更易读，也支持后续批量替换。注意：不要为每个组合都建 mixin（比如 mar-t-xs），优先保证常用模式可复用，其余仍用变量直写——过度抽象反而增加理解成本。
响应式间距不能靠媒体查询硬切
别这么写：@media (max-width: 768px) { .card { padding: 12px; } }。它破坏了变量系统的一致性，且无法复用。正确做法是定义断点感知变量：
$space-md: 16px;
$space-md-mobile: 12px;
.card {
padding: $space-md-mobile;
@media (min-width: 769px) {
padding: $space-md;
}
}
或者更进一步，用 map + function 抽取逻辑（适合大型项目）：
$spaces: (
xs: (mobile: 2px, desktop: 4px),
sm: (mobile: 4px, desktop: 8px),
md: (mobile: 12px, desktop: 16px)
);
@function space($key, $mode: desktop) {
@return map-get(map-get($spaces, $key), $mode);
}
.card { padding: space(md); }
关键点在于：所有间距出口必须经过变量或函数，确保任意一处修改都能传导到全部使用位置。否则，哪怕只有一处漏掉，整个系统就失效了。
最常被忽略的是伪元素、SVG 内嵌样式、第三方组件的自定义 CSS——它们往往绕过你的变量体系。上线前用 DevTools 检查 computed styles，搜 px 字符串，确认没有裸数字残留。
