必须统一 box-sizing: border-box，否则所有 padding 计算失效；sass 旧版不支持 20px / 2，需用 math.div(20px, 2)；运行时计算用 calc()，静态值用 math.div()；推荐 map 管理间距变量并统一单位。
直接用 math.div() 做除法、用 calc() 做运行时减法，比手算 padding 数值快且不易错——但前提是先统一 box-sizing: border-box，否则所有计算都白搭。
为什么不能直接在 Sass 里写 padding: 20px / 2？
Sass 旧版本（@use "sass:math" 之前）不支持原生除法运算符，20px / 2 会被当成 CSS 除法交给浏览器执行，而浏览器只认 calc() 里的除法。结果就是编译报错或生成非法 CSS。
- ✅ 正确做法：导入 math 模块后用
math.div(20px, 2) - ❌ 错误写法：
padding: 20px / 2（Sass 会尝试解析为除法，但语义不明确，易出错） - ⚠️ 注意：
math.div()是编译期静态计算，结果是纯数值（如10px），不带运行时逻辑
calc() 和 math.div() 到底该用哪个？
看计算是否依赖运行时变量：
- 需要响应式动态计算（比如
width - 2 * padding）→ 必须用calc()，写在 CSS 层，如padding-left: calc((100% - 200px) / 2); - 只是把设计稿的「总宽 320px，左右 padding 各占 1/8」转成具体像素 → 用
math.div(320px, 8)，编译后就是40px，更轻量 - 混合使用常见：用
math.div()算出基础 padding 值，再用calc()微调（如加一个边框宽度）
padding 简写和方向拆分怎么配合 Sass 变量？
别硬记「上右下左」顺序，用命名变量 + map 提升可读性：
$spacing-map: (
"sm": 8px,
"md": 16px,
"lg": 24px
);
<p>.card {
padding: map-get($spacing-map, "md") map-get($spacing-map, "lg") map-get($spacing-map, "md") map-get($spacing-map, "sm");
}
</p>
- 这样改一个变量，全项目 padding 尺寸联动更新
- 避免
padding: 16px 24px 16px 8px这种无意义数字堆砌 - 注意：Sass 不支持在简写中混用单位（如
1rem 10px），必须统一单位
padding 设置后盒子被撑大？先查 box-sizing
这是最常被忽略的底层前提——哪怕你 Sass 算得再准，如果元素还是 box-sizing: content-box，那 width: 300px; padding: 20px; 实际就占 340px，所有计算全偏移。
- ✅ 全局加一句：
* { box-sizing: border-box; } - ❌ 只给某个 class 加
box-sizing，父容器没设 → 嵌套后尺寸链断裂 - ⚠️ 特殊情况：需要 content-box 行为（如某些 SVG 容器）时，务必显式重置，不要依赖默认
真正难的不是写对一行 padding，而是让整个项目所有 padding 都落在同一套尺寸逻辑里——变量定义、单位统一、box-sizing 基线、运行时/编译时计算边界，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
