递归与高阶函数：用 Sass 列表和映射实现树形数据处理

在 Sass 中模拟函数式编程，用递归遍历多层嵌套的 map 并生成复杂样式。 · 难度：入门 · +10XP

递归与高阶函数：用 Sass 列表和映射实现树形数据处理

大多数教程只讲一维循环，但真实设计系统包含多层嵌套（如按钮 → 状态 → 皮肤）。本教程教你如何用递归遍历无限深度的 Sass map，生成嵌套的 CSS 规则。你会写出类似 generate-styles($tree) 的函数，自动处理任意层级的数据结构。

@function walk($map, $prefix: '') {
  $result: ();
  @each $key, $value in $map {
    $new-prefix: if($prefix == '', $key, '#{$prefix}-#{$key}');
    @if type-of($value) == 'map' {
      $result: join($result, walk($value, $new-prefix));
    } @else {
      $result: append($result, ($new-prefix: $value));
    }
  }
  @return $result;
}
$config: (
  btn: (
    sm: (font-size: 12px, padding: 4px),
    lg: (font-size: 18px, padding: 12px)
  )
);