Generated by SassMeister.com.

input.scss

// hl = Headlines
// eh = Editorial Headers
// ep = Editorial Paragraphs
// ph = Product Headers
// pp = Product Paragraphs
// scp-1 = pp-3
// scp-2 = pp-1
// cap = Captions
// cl = Content Labels
// bl = Button Labels
// acl = Article Card Labels
// f = Flashes
// schl = Sponsored Content Headlines

$type-scale-map: (
  "hl": (
    1: (
      font-size: 48,
      line-height: 56
    ),
    2: (
      font-size: 40,
      line-height: 48
    ),
    3: (
      font-size: 32,
      line-height: 40
    ),
    4: (
      font-size: 24,
      line-height: 32
    ),
    5: (
      font-size: 18,
      line-height: 24
    ),
    6: (
      font-size: 16,
      line-height: 24
    )
  ),
  "eh": (
    1: (
      font-size: 40,
      line-height: 48
    ),
    2: (
      font-size: 40,
      line-height: 48
    ),
    3: (
      font-size: 32,
      line-height: 40
    ),
    4: (
      font-size: 24,
      line-height: 32
    ),
    5: (
      font-size: 20,
      line-height: 28
    )
  ),
  "ep": (
    1: (
      font-size: 18,
      line-height: 28
    ),
    2: (
      font-size: 16,
      line-height: 24
    )
  ),
  "ph": (
    1: (
      font-size: 24,
      line-height: 32
    ),
    2: (
      font-size: 18,
      line-height: 24,
      letter-spacing: 0.5
    )
  ),
  "pp": (
    1: (
      font-size: 24,
      line-height: 32
    ),
    2: (
      font-size: 18,
      line-height: 24
    ),
    3: (
      font-size: 16,
      line-height: 24
    )
  ),
  "cap": (
    1: (
      font-size: 16,
      line-height: 24
    )
  ),
  "cl": (
    1: (
      font-size: 16,
      line-height: 16,
      letter-spacing: 1
    ),
    2: (
      font-size: 14,
      line-height: 14,
      letter-spacing: 0.6
    )
  ),
  "bl": (
    1: (
      font-size: 14,
      line-height: 14,
      letter-spacing: 1
    )
  ),
  "acl": (
    1: (
      font-size: 14,
      line-height: 14,
      letter-spacing: 1
    )
  ),
  "f": (
    1: (
      font-size: 14,
      line-height: 14,
      letter-spacing: 1
    )
  ),
  "schl": (
    1: (
      font-size: 48,
      line-height: 56
    ),
    2: (
      font-size: 16,
      line-height: 24
    )
  )
);

@each $type, $sizes in $type-scale-map {
  @each $size, $styles in $sizes {
    .#{$type}-#{$size} {
      font-size: #{map-get($styles, font-size)}px;
      line-height: #{map-get($styles, line-height)}px;
      
      @if map-get($styles, letter-spacing) {
        letter-spacing: #{map-get($styles, letter-spacing)}px;
      } @else {
        letter-spacing: 0.2px;
      }
    }
  }
}

output.css

.hl-1 {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.2px;
}

.hl-2 {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0.2px;
}

.hl-3 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.2px;
}

.hl-4 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.2px;
}

.hl-5 {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.hl-6 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.eh-1 {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0.2px;
}

.eh-2 {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0.2px;
}

.eh-3 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.2px;
}

.eh-4 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.2px;
}

.eh-5 {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.2px;
}

.ep-1 {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.2px;
}

.ep-2 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.ph-1 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.2px;
}

.ph-2 {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.5px;
}

.pp-1 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.2px;
}

.pp-2 {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.pp-3 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.cap-1 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.cl-1 {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1px;
}

.cl-2 {
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.6px;
}

.bl-1 {
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 1px;
}

.acl-1 {
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 1px;
}

.f-1 {
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 1px;
}

.schl-1 {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.2px;
}

.schl-2 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}