直接用 ms-function() 计算黄金比例间距会出错，因其默认仅处理字体缩放，需显式指定 $context: spacing 线程或改用原生 pow() 函数配合统一基数单位。
直接用 ms-function() 计算黄金比例间距会出错
因为 ms-function() 默认只处理字体缩放，不直接输出带单位的间距值。你写 margin: ms-function(2); 会得到类似 41.8px 的结果——但这是基于默认 base: 1em 和 ratio: 1.618 算出来的字体尺寸，不是你想要的 px 间距。
真正要生成黄金比例间距，得先明确基数（比如 8px 或 16px），再手动套用比例公式，或改用 modularscale-sass 的多线程配置。
- 别依赖
ms-function()默认行为，它不区分用途场景 - 如果你的项目已引入
modularscale-sass，优先走$modularscale配置 +ms()函数（新版 alias） - 没引入第三方库？直接用 Sass 原生运算更可控：
$spacing-base: 8px; margin: $spacing-base * pow(1.618, 2);
$modularscale 多线程配置必须显式声明 spacing 线程
很多人以为只要装了 modularscale-sass 就能自动算间距，其实不行。它的核心是“按用途隔离比例系统”，text 和 spacing 是两个独立线程，不声明就不存在。
正确写法：
@import "modularscale";<br>$modularscale: (<br> text: (base: 16px, ratio: 1.618),<br> spacing: (base: 8px, ratio: 1.618)<br>);<br>.card { margin-bottom: ms(2, $context: spacing); }
-
ms(2, $context: spacing)才会以8px为起点、用黄金比例推导第 2 级：≈20.9px - 漏掉
$context: spacing参数，函数就 fallback 到text线程，结果是41.8px（翻倍） - 基数单位必须统一：
8px、0.5rem可以，但混用8px和1em会导致计算失真
用原生 Sass 实现黄金比例间距更轻量也更透明
如果你只是偶尔需要几个黄金比例间距（比如卡片内边距、模块间隔），没必要引入整个 modularscale-sass。Sass 自带 pow() 函数就能搞定，且逻辑一目了然。
示例：
$phi: 1.618;<br>$base: 8px;<br>.section-1 { padding: $base * pow($phi, 0); } // 8px<br>.section-2 { padding: $base * pow($phi, 1); } // ≈ 12.94px<br>.section-3 { padding: $base * pow($phi, 2); } // ≈ 20.94px
-
pow($phi, n)比手算$base * $phi * $phi更易维护，尤其当你要跳到第 5 级时 - 注意：Dart Sass 3.4+ 支持
pow()；旧版需用自定义函数或查表近似 - 输出值带单位，可直接用于
margin、padding、gap（现代浏览器）
黄金比例间距在真实布局中容易被像素舍入破坏
就算你算出 20.94427px，浏览器最终渲染时大概率四舍五入成 21px，连续多个这样的值加起来，可能比预期多出或少掉 1–2px。这不是计算错，而是 CSS 渲染层的固有限制。
- 对齐关键元素（如卡片网格）时，优先用
gap+fr单位，避开绝对像素误差 - 若必须用像素间距，把所有相关值从同一
$base推导，比如padding、border、margin都用$base * pow($phi, n)，避免混合来源 - 调试时用 DevTools 检查 computed 值，确认是否被舍入——别只信 SCSS 编译输出
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
