Sass codegen functions to generate Bootstrap / Tailwind style utility classes from maps

_codegen.scss

// example config maps
$skeletor: (
  breakpoints: (
    sm: 500px,
    md: 750px,
    lg: 1000px,
    xl: 1250px
  ),
  colors: (
    red: red,
    blue: #00f,
    green: #bada55,
    purple: rebeccapurple
  ),
  font-families: (
    system: (-apple-system, system-ui, sans-serif)
  ),
  font-weights: (
    normal: 400,
    bold: 700
  ),
  line-heights: (
    single: 1,
    compact: 1.2,
    spacious: 1.4
  ),
  z-indexes: (
    0: 0,
    1: 1,
    under: -1,
    nav: 100,
    modal: 200,
    max: 1000
  ),
  rounded-corners: (
    small: 2px,
    pill: 100px,
    round: 50%
  )
);

// generate properties and breakpoint prefixed versions
@mixin generator($prefix, $property, $map) {
  @each $key, $val in $map {
    .#{$prefix}-#{$key} {
      #{$property}: $val;
    }
  }

  @each $break-key, $break-val in map-get($skeletor, breakpoints) {
    @include min-width($break-val) {
      @each $key, $val in $map {
        .#{$break-key}\:#{$prefix}-#{$key} {
          #{$property}: $val;
        }
      }
    }
  }
}

// call 
@include generator(bg, background-color, map-get($skeletor, colors));
@include generator(c, color, map-get($skeletor, colors));
@include generator(lh, line-height, map-get($skeletor, line-heights));
@include generator(ff, font-family, map-get($skeletor, font-families));
@include generator(fw, font-weight, map-get($skeletor, font-weights));
@include generator(z, z-index, map-get($skeletor, z-indexes));
@include generator(rc, border-radius, map-get($skeletor, rounded-corners));