<h1 class="fs-12-24">Font Size: Clamp(12px, 10vw, 24px)</h1>
<h1 class="fs-16-32">Font Size: Clamp(16px, 10vw, 32px)</h1>
<h1 class="fs-8-48">Font Size: Clamp(8px, 7vw, 48px)</h1>
<h1 class="fs-1-32">Font Size: Clamp(1px, 10vw, 32px)</h1>
$default-preferred-value: "10vw";

$required-sizes: (
  (12, 24, "8vw"),  // Minimum, Maximum, Preferred
  (16, 32),         // Preferred Value Not Provided, Default Will Be Used
  (8, 48, "7vw"),   // Custom Preferred Value
  (1, 32),          // Preferred Value Not Provided, Default Will Be Used
);

@each $size in $required-sizes {
  $min: nth($size, 1); // Get the minimum font size
  $max: nth($size, 2); // Get the maximum font size
  $preferred: if(length($size) > 2, nth($size, 3), $default-preferred-value); // Use default if no preferred value

  // Create dynamic class name
  .fs-#{nth($size, 1)}-#{nth($size, 2)} {
    font-size: clamp(#{$min}px, #{$preferred}, #{$max}px);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.