如何用SCSS动态生成包含数字1的availability类名组合？

错误原因分析 #

你遇到的SassError: $separator: (1, 2, 3, 4, 5) [2] is not a string.错误，大概率是使用join()函数时参数顺序搞反了——join()要求第一个参数是待拼接的列表，第二个是字符串类型的分隔符，如果你把分隔符和列表的位置写反，就会把列表元素当成分隔符传入，触发类型不匹配错误。

实现代码 #

下面是直接可用的SCSS代码，能生成所有包含数字1、由1-5组成的组合类名：

@function get-availability-sets() {
  $base-num: 1;
  $other-nums: 2, 3, 4, 5;
  $all-sets: ($base-num,); // 初始化：包含单个1的集合

  // 遍历其他数字，生成所有包含1的组合
  @each $num in $other-nums {
    // 添加1与当前数字的二元组合
    $all-sets: append($all-sets, ($base-num, $num), comma);
    // 基于已有多元素组合，生成更长的包含1的组合
    $temp-sets: ();
    @each $set in $all-sets {
      @if length($set) > 1 and index($set, $base-num) != null and index($set, $num) == null {
        $temp-sets: append($temp-sets, append($set, $num), comma);
      }
    }
    $all-sets: append($all-sets, $temp-sets, comma);
  }

  // 去重并确保集合唯一
  $unique-sets: ();
  @each $set in $all-sets {
    @if index($unique-sets, $set) == null {
      $unique-sets: append($unique-sets, $set, comma);
    }
  }
  @return $unique-sets;
}

// 生成所有目标类名
$availability-classes: get-availability-sets();
@each $set in $availability-classes {
  $class: 'availability-' + join($set, '-');
  .#{$class} {
    // 这里替换为你的实际样式
    outline: 1px solid #ccc;
    padding: 4px 8px;
  }
}

代码说明 #

1. get-availability-sets()函数：负责生成所有包含1的1-5数字组合列表，从单个1开始，逐步拼接其他数字，最终得到所有符合要求的集合。
2. 类名生成逻辑：通过join($set, '-')将数字列表转为连字符连接的字符串，再拼接前缀availability-得到完整类名。
3. 样式部分：遍历所有生成的类名，添加自定义样式即可。

编译后会生成你需要的所有类，比如.availability-1、.availability-1-2、.availability-1-2-3-4-5等。

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