Generate grid-template-area definitions via SCSS

gen.scss

@use "sass:list";
@use "sass:string";

// Quick hack (tm) e.g. not cleaned-up/optimized but since it runs on compile time - who cares ;)
@function genAreas($prefix, $rows, $columns) {
  $list: ();
  $line: ();
  $result: '';
  @for $row from 1 through $rows {
    $result: '';
    @for $column from 1 through $columns {
      $result: #{$prefix}#{$row} + '_' + #{$column};
      $line: list.append($line, $result);
    }
    $result: '';
    @if $line {
      $str: list.join($line, (), 'space');
      $str: '"' + $str + '"';
      $list: list.append($list, string.unquote($str));
    }
    $line: ();
  }
  @return $list;
}

.grid {
  display: grid;
  grid-template-areas: list.join(genAreas('row', 30, 10), (), 'space');
  @debug list.join(genAreas('row', 5, 3), (), 'space');
}