Skip to content

Instantly share code, notes, and snippets.

@asuh
Created November 2, 2022 05:10
Show Gist options
  • Save asuh/09305fef1e5d765881677596a4eb8298 to your computer and use it in GitHub Desktop.
Save asuh/09305fef1e5d765881677596a4eb8298 to your computer and use it in GitHub Desktop.
/*
* Fluid Typography
* https://smashingmagazine.com/2022/10/fluid-typography-clamp-sass-functions/
*/
@use 'sass:math';
$default-min-bp: 320px;
$default-max-bp: 960px;
@function round($number, $decimals: 0) {
$n: 1;
@if $decimals > 0 {
@for $i from 1 through $decimals {
$n: $n * 10;
}
}
@return math.div(math.round($number * $n), $n);
}
@function px-to-rem($px) {
$rems: math.div($px, 16px) * 1rem;
@return $rems;
}
@function fluid($min-size, $max-size, $min-breakpoint: $default-min-bp, $max-breakpoint: $default-max-bp, $unit: vw) {
$slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
$slope-to-unit: round($slope * 100, 2);
$intercept-rem: round(px-to-rem($min-size - $slope * $min-breakpoint), 2);
$min-size-rem: round(px-to-rem($min-size), 2);
$max-size-rem: round(px-to-rem($max-size), 2);
@return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} + #{$intercept-rem}, #{$max-size-rem});
}
// Usage: font-size: #{fluid(16px, 31px)};
// Result: font-size: clamp(1rem, 2.34vw + 0.53rem, 1.94rem);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment