如何通过Sass Mixin传参生成指定单个或全部容器类？

我来帮你改造这段Sass代码，让它既能批量生成全部4个容器类，也能根据指定参数只生成单个类，完美匹配你的需求~

修改后的完整代码 #

$base-space: 1rem !default; 
$space-map : ( 
  '1o9': $base-space, 
  '1o8': $base-space/8, 
  '1o4': $base-space/4, 
  '1o2': $base-space/2, 
) !default; 

@mixin containers($new-space-map: $space-map, $target: null) { 
  // 如果指定了单个目标key，只生成对应类
  @if $target != null {
    @if map-has-key($new-space-map, $target) {
      $value: map-get($new-space-map, $target);
      .container--#{$target}{ margin: $value 0; }
    } @else {
      @warn "Key '#{$target}' does not exist in $new-space-map";
    }
  } 
  // 没有指定目标，生成全部类
  @else {
    @each $name, $value in $new-space-map { 
      .container--#{$name}{ margin: $value 0; } 
    } 
  }
} 

// 调用示例：
// 1. 生成全部4个类
@include containers();

// 2. 只生成.container--1o8类
// @include containers($space-map, '1o8');

代码说明 #

• 给containers混入新增了可选参数$target，默认值为null，用来指定你要单独生成的类对应的key（比如'1o9'、'1o8'）
• 加入了判断逻辑：
  • 如果传入了$target，先检查这个key是否存在于传入的map中（避免生成无效类），存在的话就只生成对应的单个容器类
  • 如果没传$target，就保持原来的逻辑，遍历整个map生成全部4个类
• 还加了@warn提示，如果你传入的key不存在，会在编译时给出警告，方便调试

调用方式 #

• 生成全部类：直接调用@include containers();或者@include containers($space-map);
• 生成单个类：比如要生成.container--1o4，就调用@include containers($space-map, '1o4');

内容的提问来源于stack exchange，提问作者user2359466