Sass 元编程与类型自省：动态生成样式的黑魔法

利用 meta 模块和类型检查函数在运行时探测变量类型、长度和属性，实现自适应的样式生成器。 · 难度：入门 · +10XP

元编程：让Sass自我观察

Sass 的 meta 模块提供meta.type-of、meta.call、meta.feature-exists等工具。本课展示如何编写一个智能间距生成器，它能接受数字、列表或映射，并自动决定生成padding还是margin、是单个值还是四边。还会演示用meta.inspect调试和用meta.function-exists做特性检测。这让你可以写出高度灵活的抽象层。

@use 'sass:meta';
@mixin spacing($value) {
  $type: meta.type-of($value);
  @if $type == 'number' {
    padding: $value;
  } @else if $type == 'list' {
    padding: nth($value, 1) nth($value, 2);
  } @else if $type == 'map' {
    @each $prop, $val in $value {
      #{$prop}: $val;
    }
  }
}
.box {
  @include spacing(16px);
  @include spacing((10px 20px));
  @include spacing((padding-top: 5px, padding-bottom: 10px));
}