SCSS变量不能自增，真正的动态计数依赖CSS原生counter-reset和counter-increment；@for循环仅生成静态规则，而CSS计数器在渲染时实时计算并自动重排。
SCSS 本身没有“自增变量”这个概念——它不支持运行时递增，所有变量在编译期就固定了。真正能动态计数、生成序列编号或实现顺序动画的，是 counter-reset 和 counter-increment 这套 CSS 原生命令，不是 SCSS 变量。
为什么误以为 SCSS 变量能自增？
常见混淆点在于：有人用 SCSS 循环（@for）生成一堆带序号的类名，比如 .item-1、.item-2，再给每个类加不同 animation-delay。这看起来像“自增”，但只是编译时展开的静态规则，和运行时计数无关。
- SCSS 变量（如
$i: 1）不能在循环中被修改，@for $i from 1 through 5中的$i是只读迭代器 - 你无法用
$i: $i + 1实现累加——SCSS 不支持赋值更新 - 所有生成的 CSS 都是提前写死的，DOM 新增元素不会触发新样式匹配
真正起作用的是 CSS 计数器（counter-reset/counter-increment）
这套机制在浏览器渲染时实时计算，完全依赖 DOM 结构，不需要预定义数量，新增/删除元素后编号自动重排。
-
counter-reset: section在父容器上初始化一个叫section的计数器 -
counter-increment: section每匹配一次就让该计数器加 1（可指定步长，如section 2） -
content: counter(section)把当前值插入伪元素，支持格式化（decimal、lower-roman等） - 嵌套场景用
counters(section, ".")，自动处理层级分隔符
想做列表项顺序入场动画？别硬套计数器
CSS 计数器输出的是文本内容，不能直接驱动 animation-delay 或 transform。想让第 N 个 li 延迟 N * 0.1s 出现，必须用其他方式：
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案：用
:nth-child(n)手动写延迟（适合固定长度，如最多 10 项） - SCSS 辅助方案：用
@for $i from 1 through 20自动生成li:nth-child(#{$i}) { animation-delay: #{$i * 0.1}s; } - JS 动态方案：遍历
li元素，设style.setProperty('--delay', i * 0.1 + 's')，再用animation-delay: var(--delay) - 注意：不要试图用
counter()的返回值参与 calc() 或 animation-delay 计算——它不是数值类型，不能参与 CSS 运算
最易被忽略的一点：计数器作用域由 counter-reset 所在元素决定，且会继承。如果父级没重置而子级又用了同名计数器，可能意外覆盖或跳号——调试时优先检查 counter-reset 是否放在了预期的包裹容器上。
