less无法实现css计数器的动态逻辑，但可安全封装counter-reset、counter-increment等声明；重点在于统一命名、隔离作用域、避免重复，而非运行时计算。
Less 本身不支持 CSS 计数器（counter-reset / counter-increment）的动态计算或逻辑封装，它只是 CSS 预处理器，编译时无法读取 DOM 结构或运行时状态。所以你不能用 Less “生成” 递增的数字内容，但可以**安全、可复用地输出计数器相关的 CSS 声明**——这才是实际可行且值得封装的目标。
为什么不能在 Less 中“实现计数器逻辑”
常见误解是想让 .counter(@n) 自动生成第 1、2、3 级标题的编号样式。但 Less 编译阶段不知道 HTML 里会有几个 <h2></h2>，也无法遍历元素。CSS 计数器的行为完全由浏览器在渲染时根据 DOM 树和已声明的 counter-reset/counter-increment 规则实时计算，与预处理器无关。
所以封装重点不是“算数”，而是：避免手写重复的 counter-reset 块、统一命名约定、隔离作用域、适配多级嵌套场景。
用 mixin 封装 counter-reset 和 counter-increment 声明
这是最实用的封装方式：把常用计数器初始化和递增操作抽成带参数的 mixin，保证语义清晰、调用简洁、不易漏写 content。
示例：
.counter-reset(@name: section, @value: 0) {
counter-reset: @name @value;
}
.counter-increment(@name: section, @value: 1) {
counter-increment: @name @value;
}
.counter-content(@name: section, @separator: ".") {
&::before {
content: counter(@name) @separator;
}
}
使用时：
.chapter { .counter-reset(chapter); }.section { .counter-increment(chapter); .counter-content(chapter, ""); }.subsection { .counter-increment(section); .counter-content(section, "."); }
注意：counter() 是 CSS 函数，不是 Less 函数，必须原样保留在 content 值中，不能被 Less 解析或插值。
避免常见坑：作用域泄漏与重置时机
CSS 计数器默认是全局作用域，嵌套结构中容易串号。Less 封装不能改变这一点，但能帮你更严谨地控制：
- 始终为不同层级定义独立计数器名（如
chapter、section、figure），不要复用section既给标题又给图表 -
.counter-reset必须放在父容器上（如.doc），而不是每个子项上；否则每次都会重置，导致全显示 1 - 如果要“局部重置”，比如每个
.article从 1 开始编号，就得在.article上调用.counter-reset(section)，而不是只在根节点写一次 - Less 不会帮你检查
counter-reset是否缺失 —— 编译后就是普通 CSS，漏了就真不会计数
何时该放弃 Less 封装，直接写原生 CSS
当项目中计数器规则极少（比如只有一处 counter-reset: fig; counter-increment: fig;），或团队对 CSS 计数器不熟、容易误用 counter() 语法时，硬套 mixin 反而增加理解成本。
另外，以下情况 Less 无能为力，必须靠 JS 或 HTML 属性配合：
- 根据数据长度动态生成编号（如列表项数不确定）
- 跨容器连续编号（如多个
.post中的<figure></figure>共享同一计数器） - 需要编号后加文字（如 “图 1”、“Figure 1”）——
counter()只返回数字，文字得手动拼在content里，mixin 可传参但无法自动本地化
真正关键的不是“用没用 Less 封装”，而是是否理解 counter-reset 的块级作用域、counter-increment 的触发时机，以及 content: counter(x) 必须搭配 ::before/::after 才生效这个事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
