纯 CSS 不支持循环，所谓“嵌套循环中的样式递归”实为预处理器（如 Sass）编译时展开的静态规则；真正实现“自动覆盖式递归”的是 CSS 自定义属性配合继承与局部重定义。
纯 CSS 本身不支持循环语法，所谓“嵌套循环中的样式递归”，实际是开发者误将预处理器（如 Sass/LESS）的 @for、@each 或递归 mixin 行为，当成原生 CSS 能力；而真正能在运行时产生“递归覆盖”效果的，只有 CSS 自定义属性（即 --* 变量）配合作用域继承与局部重定义。
为什么不能在纯 CSS 里写 for 循环
浏览器解析 CSS 时只做声明匹配与层叠计算，不执行逻辑或迭代。你看到的“循环生成类名”，比如 .item-1 到 .item-100，全是预处理器在构建阶段展开的静态规则——编译后就没了循环，只剩一堆独立选择器。原生 CSS 没有 @for、没有 loop()、也没有变量计算能力。
- 试图在
.css文件里直接写@for $i from 1 to 5→ 浏览器报错Unknown at rule @for - 用 JavaScript 动态插入 100 个
style标签模拟循环 → 性能差、不可维护、脱离样式表语义 - 依赖 CSS-in-JS 库（如 styled-components）→ 已不属于“CSS 解决方案”，而是运行时 JS 控制
CSS 变量如何实现“自动覆盖式递归”
真正的递归感来自变量继承链：父元素设 --gap: 12px，子元素设 --gap: 8px，孙子再设 --gap: 4px，每一层都用 var(--gap)，视觉上就像“越往里缩得越紧”。这不是代码循环，而是作用域逐层覆盖的自然结果。
-
:root定义全局基准值，如--spacing-unit: 8px - 组件容器（如
.card）可覆盖为--spacing-unit: 12px，影响其所有后代 - 卡片内部的
.card__header还能再覆盖--spacing-unit: 6px，仅作用于自身及子元素 - 只要所有间距都写成
padding: var(--spacing-unit)，无需改 HTML 或新增 class，就能实现“嵌套越深，数值越小”的视觉递归
容易踩的坑：变量名冲突与继承断裂
变量覆盖看似简单，但一不留神就会失效。关键不是“能不能覆盖”，而是“在哪一层被覆盖、有没有被继承下去”。
- 非继承属性（如
background-color）不会传递变量值，必须显式写var(--bg)才生效 - 如果某层元素用了
display: contents或visibility: hidden，它仍参与变量继承；但若用了display: none，其子元素完全脱离渲染树，变量继承中断 - 用
!important声明变量值（如--color: red !important）会阻止下级覆盖，慎用 - 避免在多个不相关组件中复用同一变量名（如都用
--size），不同语义应配不同前缀：--btn-size、--icon-size
最常被忽略的一点：变量覆盖只发生在声明它的选择器作用域内，且必须被后代元素主动读取。父元素设了 --gap，但子元素没写 margin: var(--gap)，那这个“递归”就只是个未启用的伏笔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
