SCSS自增变量实现计数器与序列动画技巧

本文澄清了SCSS变量无法真正自增的常见误解，强调所有“计数”效果本质上依赖CSS原生的counter-reset和counter-increment机制——它们在浏览器渲染时动态响应DOM变化，自动重排编号；而SCSS的@for循环仅生成静态样式规则，变量在编译期即固化，不支持运行时累加。文章深入剖析了计数器的作用域、嵌套用法及格式化能力，并指出其内容值不可用于animation-delay等数值计算，进而给出实现序列动画的三种实用方案：纯CSS伪类、SCSS批量生成、或JS动态注入，帮助开发者告别硬编码、拥抱真正灵活的动态计数与顺序动效。

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 是否放在了预期的包裹容器上。

本篇关于《SCSS自增变量实现计数器与序列动画技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！