scut-center-absolutely 必须用 n 表示未设置宽高，因内部用 $width != n 判断；传 null、空值或省略参数会导致编译错误或失效；未知尺寸应改用 top:50%/left:50%/transform 居中。
绝对定位居中必须用 scut-center-absolutely，但别直接抄参数——宽高传 n 表示“不设”，不是留空或省略，否则编译报错或居中失效。
为什么 scut-center-absolutely 的 n 不能写成 null 或空值
这个混合宏把 n 当作字符串字面量处理，内部用 @if $width != n 判断是否设置宽高。如果你传 null、'' 或直接漏掉参数，Sass 不会自动 fallback 到 n，而是让 $width 变成未定义变量，编译直接中断。
常见错误写法：
-
@include scut-center-absolutely(20em, )—— 尾部逗号导致第二个参数为空，Sass 解析失败 -
@include scut-center-absolutely(20em)—— 缺少第二个参数，$height未声明，nth($dimensions, 2)报错 -
@include scut-center-absolutely(20em, null)——null是 Sass 关键字，$height != n永远为 true，高度被错误设为null，CSS 输出无效
正确写法只有一种：@include scut-center-absolutely(20em, n) 或 @include scut-center-absolutely(n, 2.5em)。
transform: translate(-50%, -50%) 居中比 margin-left: -$width/2 更通用
当元素宽高不确定（比如文字内容动态、图片加载中、或用了 fit-content），scut-center-absolutely 要求你提前知道尺寸，硬编码容易脱节。此时应切换策略：用 position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)。
这个组合不要求宽高，也不依赖 margin 计算，是目前最稳妥的未知尺寸居中方案。可封装成轻量 mixin：
@mixin center-unknown {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注意：它和 scut-center-absolutely 互斥——后者靠 margin 偏移，前者靠 transform 偏移，混用会导致定位错乱。
响应式场景下，居中逻辑不能只靠一个 mixin
比如一个弹窗在桌面端绝对居中，在移动端要贴顶并留出状态栏间距，这时不能只调一次 @include scut-center-absolutely。你需要分层控制：
- 基础定位用
position: fixed（保证滚动不偏移） - 垂直方向：桌面端
top: 50%+transform，移动端top: env(safe-area-inset-top)+translateY(0) - 水平方向保持
left: 50%+transform不变 - 所有断点切换必须用
@include respond-to统一管理，避免媒体查询散落各处
这意味着：居中不是“一个函数调完就结束”的事，而是定位方式、偏移手段、响应行为三者耦合的结果。最容易被忽略的是——transform 在某些旧 Android WebView 中有渲染抖动，若需极致兼容，得降级到 margin 方案并配合 JS 动态读宽高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
