SCSS 中应基于基础单位 $spacing-unit 派生语义化 spacing map，并封装 spacing() 函数支持方向参数与 fallback，配合命名空间 utility class 和 ESLint 约束，实现可维护、可扩展的间距管理。
SCSS 里用变量管理 margin，不是为了“写得更酷”，而是避免在多个组件里反复写 margin: 16px、margin-bottom: 24px 这类硬编码值——一旦设计系统调整间距基数，你得手动搜替换，漏一个就错位。
定义可扩展的 spacing 变量而非单个数值
别只写 $spacing-xs: 4px、$spacing-sm: 8px 这种孤立变量。它们难以推演、难维护。应该基于一个基础单位（比如 $spacing-unit: 4px）派生整套值：
$spacing-unit: 4px; $spacing: ( 'none': 0, 'xs': $spacing-unit * 1, // 4px 'sm': $spacing-unit * 2, // 8px 'md': $spacing-unit * 4, // 16px 'lg': $spacing-unit * 6, // 24px 'xl': $spacing-unit * 8, // 32px 'xxl': $spacing-unit * 12 // 48px );
- 用 map 而非独立变量，后续可统一遍历生成工具类或校验规则
- 键名用语义化名称（
md比16更易读且抗变化） - 避免直接用
rem或em定义基础单位——除非你已锁定根字号且不打算响应式缩放
用 @function 封装 margin 工具函数
手写 margin: map-get($spacing, 'md') 太啰嗦，也容易拼错 key。封装成函数能自动 fallback、支持方向参数、还能做类型检查：
@function spacing($key, $direction: null) {
@if not map-has-key($spacing, $key) {
@warn "Unknown spacing key '#{$key}' — using 'md' instead.";
$key: 'md';
}
$value: map-get($spacing, $key);
<p>@if $direction == null {
@return $value;
} @else if $direction == 'top' {
@return $value 0 0 0;
} @else if $direction == 'bottom' {
@return 0 0 $value 0;
} @else if $direction == 'x' {
@return 0 $value;
} @else if $direction == 'y' {
@return $value 0;
} @else {
@warn "Unknown direction '#{$direction}' — returning single value.";
@return $value;
}
}- 调用示例：
margin: spacing('lg');或margin-top: spacing('sm'); - 函数内不做单位转换（比如把 px 转 rem），那属于设计系统层级的决策，不该混在这里
- 不要在函数里加逻辑判断屏幕尺寸——响应式间距应由媒体查询 + class 控制，而非函数返回不同值
生成 utility class 时注意命名冲突和选择器权重
很多人用 @each 批量输出 .m-md、.mt-lg 类，但容易踩两个坑：
立即学习“前端免费学习笔记（深入）”；
- 命名空间缺失：如果项目已有
.mt-2（Tailwind 风格）或.u-margin-top（BEM），新生成的.mt-md可能被覆盖或误用 - CSS 优先级失控：批量生成的 utility class 通常用
!important强行提权，结果是组件内部margin-bottom: 0也干不过.mb-none !important
建议做法：
- 统一前缀，比如
.s-m-{size}、.s-mt-{size}（s-表示 spacing system） - 完全弃用
!important；靠源码顺序控制权重（utility 文件 import 在组件样式之后） - 不生成所有组合（如
.m-x-y），只保留高频组合：.s-m（全向）、.s-mt/.s-mb/.s-ml/.s-mr、.s-mx、.s-my
真正难的不是写出这套变量和函数，而是让团队所有人停止手写 margin: 12px。这需要配合 ESLint 规则（禁用字面量 margin 值）+ 设计系统文档标注使用场景（比如“卡片底部留白固定用 s-mb-md”），否则再好的 SCSS 也会被绕开。
