<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.