直接用@include loader01()会出错，因该mixin强制要求传入$size（须带单位如32px）和$color（支持命名色、十六进制、rgb，不支持hsl嵌套），缺省值仅在变量文件定义且非所有参数都启用fallback。
SCSS mixin 的参数怎么传才不踩坑
直接用 @include loader01() 而不传参，结果往往是尺寸错乱、颜色失效或动画卡顿——因为 SpinThatShit 的每个 loader mixin 都要求至少传入 $size 和 $color。缺省值只在变量文件里定义，不是所有 mixin 都启用 fallback。
-
$size必须带单位（如32px或1.5rem），纯数字（32）会导致编译报错Invalid CSS after "$size" -
$color接受命名色（blue）、十六进制（#2c3e50）、RGB（rgb(44, 62, 80)），但不支持 HSL 函数嵌套，否则 Sass 编译器会提示argument $color of mixin loader01 must be a color -
$duration默认是1.2s，但如果设为0.8（漏写s），Sass 不报错但浏览器解析失败，动画直接不触发
loader01 到 loader12 的参数差异在哪
不是所有 loader 都支持全部参数。比如 loader03（双环旋转）额外需要 $inner-size 和 $gap，而 loader07（脉冲圆点）根本不接受 $border-size —— 传了会被忽略，但不会警告。
-
loader01、loader02、loader04：支持$size、$color、$border-size、$duration -
loader03、loader06：多一个$inner-size，用于控制内环直径，值必须小于$size，否则渲染异常 -
loader09（跳动方块）：用$count控制方块数量（默认 3），但最大只支持 5；设为 6 时动画节奏错乱，CSS 变量未覆盖对应 keyframes
如何避免 SCSS 编译后体积暴涨
每次 @include 一个 loader，Sass 都会把整段 keyframes 和规则复制一遍。12 个 loader 全部引入，哪怕只用其中 2 个，CSS 文件也会膨胀 3 倍以上。
- 只 @import 单个 loader 文件，比如
@import 'src/loaders/_loader01.scss';，而不是整个loaders.scss - 用
!default覆盖变量时，确保在 import 之前声明，否则无效；例如：$color: #e74c3c !default;必须出现在@import前 - 生产环境开启 Sass 的
--style compressed，否则生成的 CSS 里会残留大量空行和注释，影响首屏加载
动画启停为什么不能靠 display: none
用 JS 控制 display: none 切换 loading 状态，动画会中断重置，下次显示时从头开始转——这不是视觉问题，而是浏览器清除了正在运行的 animation 实例。
- 正确做法是用
opacity+visibility组合：.loading-element { opacity: 0; visibility: hidden; transition: opacity .2s; }，再通过 JS 切换active类 - 如果必须隐藏 DOM，用
aria-hidden="true"+inert属性代替display: none，保持动画上下文不销毁 - SpinThatShit 的 mixin 默认不包含启停逻辑，得自己补一层 wrapper 类来管理状态，否则反复 toggle class 会造成 layout thrashing
loader01 用 ease-in-out，loader05 用 steps(8)，混用时用户感知到的“等待感”会割裂。参数化控制只是第一步，节奏对齐得靠人工调 $duration 和 keyframes offset。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
