怎样编写递归SCSS函数以生成多层级缩进的CSS样式？-css教程-PHP中文网

scss 的 @function 不支持递归调用，因编译器静态解析时禁止函数内嵌套自身调用；应使用 @mixin 配合 @for 循环或 @each 遍历 map 生成缩进类，确保静态、可控且兼容。

怎样编写递归scss函数以生成多层级缩进的css样式？

SCSS 里不能定义递归函数

SCSS 的 @function 不支持递归调用——编译器会在解析阶段报错 "Function calls may not be nested inside their own definition"。这不是语法写错了，而是语言设计限制：Sass 在编译时做静态展开，无法处理运行时才确定深度的调用链。

所以，试图写类似这样的代码会直接失败：

@function indent($level) {
  @if $level == 0 { @return 0; }
  @else { @return 1rem + indent($level - 1); } // ❌ 编译报错
}

用 @mixin + @for 替代递归生成缩进类

实际项目中要生成 .indent-1、.indent-2….indent-10 这类样式，应该用 @mixin 配合 @for 循环，这是稳定、可预测且被广泛采用的方式。

@for 是编译期展开，不依赖函数调用栈，完全规避递归限制
缩进值可用乘法计算（如 $level * 1.5rem），也可查表（用 map-get 查预设层级值）
生成的 CSS 类名和声明都是静态的，无运行时开销，兼容所有 Sass 版本（包括 Dart Sass 1.7+）

示例：

@mixin generate-indent-classes($max: 10, $unit: 1.5rem) {
  @for $i from 1 through $max {
    .indent-#{$i} {
      padding-left: $i * $unit;
    }
  }
}
<p>@include generate-indent-classes(5); // 生成 .indent-1 到 .indent-5</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

需要动态计算缩进值？用 map + @each 更安全

如果各层级缩进不是等差（比如 1rem、2.25rem、4rem），硬写 @for 乘法就不够用了。这时用 map 存映射关系，再用 @each 遍历更清晰，也避免魔数和算术错误。

键名建议用数字字符串（如 "1"），避免 map key 类型混淆
值必须是合法 CSS 尺寸（带单位），不能是纯数字
注意 map-keys() 返回顺序不保证，若需严格序号顺序，仍应优先用 @for

示例：

$indent-steps: (
  "1": 1rem,
  "2": 2.25rem,
  "3": 4rem,
  "4": 6.5rem
);
<p>@each $key, $value in $indent-steps {
.indent-#{$key} {
padding-left: $value;
}
}</p>