Sass 本身不禁止魔数，但通过语义变量（如$spacing-sm）、比例函数scale()和map映射（如$button-heights）可系统性消除；关键在集中管控数值，而非语法限制。
直接说结论：Sass 本身不禁止魔数，但通过变量、函数和设计系统约束，能系统性消除重复出现的魔法值——关键不在“怎么写”，而在“谁来管这些数值”。
用 $spacing、$radius 等语义变量替代裸数字
魔数本质是缺乏上下文的字面量，比如 margin: 16px 或 border-radius: 4px。这类值一旦散落在多个文件里，改起来就失控。
实操建议：
- 把所有间距、圆角、阴影偏移、断点像素值，统一收口到
_variables.scss中，用语义名命名：$spacing-xs: 4px、$spacing-sm: 8px、$radius-md: 6px - 禁用裸数字调用：
padding: 12px→ 必须写成padding: $spacing-md（前提是已定义） - 避免“伪语义”变量，如
$base-margin: 16px—— “base”不说明用途，仍属魔数变体
用 scale() 函数推导衍生值，而非硬编码比例
常见错误是手动写 font-size: 1.25rem、line-height: 1.5、margin-bottom: 2rem，看似合理，实则割裂。当基础字号调整时，这些值不会联动更新。
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
实操建议：
- 定义一个基准比例系统，例如：
$scale-ratio: 1.25，再用函数生成层级：@function scale($n) { @return math.pow($scale-ratio, $n) * 1rem; } - 然后统一使用：
font-size: scale(0)、h2 font-size: scale(2)、margin-bottom: scale(1) - 注意：Sass 3.3+ 需启用
math.pow（旧版用unitless-powpolyfill），否则会报错Undefined operation "pow"
用 @if + map-get 控制组件级数值边界
按钮尺寸、卡片阴影、表单控件高度等，常因“视觉微调”塞进一堆条件判断，最终变成 height: if($size == 'lg', 48px, if($size == 'sm', 32px, 40px)) —— 这类嵌套就是魔数温床。
实操建议：
- 用
map显式声明合法取值范围：$button-heights: ("sm": 32px, "md": 40px, "lg": 48px) - 封装校验逻辑：
@function button-height($size) { @return map-get($button-heights, $size) or map-get($button-heights, "md"); } - 调用时若传入非法键（如
"xl"），自动 fallback 到默认值，避免样式崩坏；同时让所有尺寸可被工具扫描、文档生成、设计系统同步
真正难的不是写几个变量，而是让团队所有人——包括新来的前端、临时支援的设计师、甚至后端改样式时——都默认去查 _tokens.scss 而不是随手敲个 24px。数值一旦脱离集中管控，魔数就会在下一个 git commit 里复活。
