SASS动态类生成报错：Missing argument $val问题求助

错误根源 #

你遇到的SassError: Missing argument $val是因为对SASS的append()函数和数据结构理解有误：

• append()是专门操作**列表（List）**的函数，参数格式为append($list, $val, $separator: auto)，其中第二个参数$val是必填的待添加元素。你错误地用$class-name: $class这种键值对命名参数的方式调用它，导致SASS识别不到必填的$val参数，从而报错。
• 你需要存储的是「类名-对应样式」的键值对结构，这种场景应该用SASS的**映射（Map）**而非列表，操作映射要使用map.merge()来合并新的键值对，而非append()。

修正方案一：用映射存储并生成样式 #

修正后的生成函数 #

@function generate-classes($property, $start, $end, $val) {
  $classes: (); // 初始化空映射

  @for $i from $start through $end {
    $class-name: ".#{$property}-#{$i}";
    $style: (
      #{$property}: $i * $val
    );

    // 使用map.merge合并新的类名-样式键值对到映射中
    $classes: map.merge($classes, ($class-name: $style));
  }

  @return $classes;
}

调用与生成样式 #

// 生成padding-top和padding-bottom的类映射
$pt: generate-classes(padding-top, 1, 10, 0.75rem);
$pb: generate-classes(padding-bottom, 1, 10, 0.75rem);

// 合并两个映射并遍历生成样式
$all-classes: map.merge($pt, $pb);
@each $class-name, $styles in $all-classes {
  #{$class-name} {
    @each $prop, $value in $styles {
      #{$prop}: $value;
    }
  }
}

更简洁的方案：用混合宏直接生成样式 #

不需要先存储再遍历，直接用Sass混合宏（Mixin）可以一步完成样式生成，代码更精简：

@mixin generate-classes($property, $start, $end, $val) {
  @for $i from $start through $end {
    .#{$property}-#{$i} {
      #{$property}: $i * $val;
    }
  }
}

// 直接调用混合宏生成所需样式
@include generate-classes(padding-top, 1, 10, 0.75rem);
@include generate-classes(padding-bottom, 1, 10, 0.75rem);

这个方案会直接输出你预期的.padding-top-1到.padding-top-10、.padding-bottom-1到.padding-bottom-10所有样式类，无需额外的遍历操作。

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