Sass mixin 是实现可维护骨架屏动画的唯一合理方案，通过参数化控制 $size、$duration、$delay 和 $gradient，避免重复编写 keyframes 和硬编码延迟，提升多元素节奏协调性与后续调整效率。
直接用 linear-gradient + background-position 动画就能做出骨架屏，Sass 的价值不在“能不能做”，而在「避免重复写 5 个 @keyframes、12 处 animation-delay、每次改时长都要全局搜索」。
为什么不能只写一个 @keyframes shine 就完事
真实骨架屏不是全屏统一扫光：头像要快一点浮现，标题稍慢，段落行还得错开节奏，否则列表项同步闪动会显得假。硬编码 animation-delay: 0.1s / 0.2s 看似简单，但加到第 8 个列表项时，你已经记不清第 5 个该延多少——更别说后续要调整整体节奏，得挨个改。
- 所有骨架元素共用同一套动画逻辑，但每个实例需要独立控制
animation-duration、animation-delay、background-size -
@keyframes本身不支持参数，Sass mixin 是唯一能收口这些变量的地方 - 别把渐变方向（
90degvsto right）或透明度值写死在 mixin 里，留作参数更灵活
@mixin skeleton-shine 必须带哪些参数
一个可用的骨架屏 mixin 至少要覆盖三类可变行为：光效尺寸、移动节奏、容器适配。下面这个版本已在多个项目中验证过：
.skeleton-avatar {
@include skeleton-shine(
$size: 40px 40px,
$duration: 1.8s,
$delay: 0.1s,
$gradient: linear-gradient(90deg, transparent, #e0e0e0, transparent)
);
}
.skeleton-title {
@include skeleton-shine(
$size: 200px 16px,
$duration: 1.6s,
$delay: 0.2s,
$gradient: linear-gradient(90deg, transparent, #d0d0d0, transparent)
);
}
-
$size必须大于容器宽高（如头像 40×40，$size设为80px 40px），否则background-position移动时会断层 -
$delay不是可选参数——列表项必须逐个错开，建议用@for $i from 1 through 5自动生成，而不是手写 -
$gradient默认值可设为linear-gradient(90deg, transparent, #e0e0e0, transparent)，但允许调用方覆盖，方便深色模式切换
容易被忽略的兼容性细节
IE11 和部分旧版安卓 WebView 对 background-position 动画支持不稳定，直接 fallback 到 opacity 脉冲比强行兼容更可靠。
立即学习“前端免费学习笔记（深入）”；
- 别在 mixin 里写
@supports (background-position: 100% 0)—— Sass 编译期无法判断运行时支持情况，应该由外层 CSS 媒体查询或 JS 特性检测控制 - 所有骨架容器必须有明确的
width和height，否则background-size计算会失准；用aspect-ratio比固定 px 更健壮 - 如果父容器用了
overflow: hidden，确保骨架元素没意外溢出——background-position: -200% 0可能导致左侧露白，加overflow: hidden到骨架元素自身更稳妥
最麻烦的从来不是写出第一个骨架，而是第 27 个列表项加载时，你还得记得它该比上一个慢 0.05s、渐变颜色浅 2%，且不能影响头像圆角。Sass mixin 不解决设计问题，但它能把这种机械劳动锁死在一个地方。
