Here’s the SCSS function. I found the basic functionality online and modified it to suit my needs.
I added notes in the comments so I don’t forget how to use it over time 
but it’s pretty simple. By default, I already added my SCSS variables for the smallest (480) and largest (1280) breakpoints, which will always be the same for me. You can obviously change them to whatever you prefer. Then when you call the function, you just have to input the smallest value and largest value you want (see usage in the comments).
// SCSS global variables should be located above the functions and mixins.
// These are very specific variables, but usually you want them to be more generic
// like $breakpoint--sm or something, where the values can be changed and still make sense.
$size--480: 48rem;
$size--1280: 128rem;
// Fluid Size
// —
// Usage: fluid(1.6rem, 1.8rem, 48rem, 128rem)
// @param: $_size-at-min-width // Minimum Size
// @param: $_size-at-max-width // Maximum Size
// @param: $_min-width // Minimum Breakpoint
// @param: $_max-width // Maximum Breakpoint
@function fluid($_size-at-min-width,
$_size-at-max-width,
$_min-width: $size--480,
$_max-width: $size--1280) {
$_slope: ($_size-at-max-width - $_size-at-min-width) / ($_max-width - $_min-width);
$_y-axis-intersection: -1 * $_min-width * $_slope +$_size-at-min-width;
$_fluid: clamp(#{$_size-at-min-width},
#{$_y-axis-intersection} + #{$_slope} * 100vw,
#{$_size-at-max-width});
@return $_fluid;
}
For example, I use the default font-size of 62.5% so all of my REM values are easier to visualize, so here are some sample usages:
// Create a custom variable that includes the CSS clamp function.
// You can input custom SCSS variables you may already have like $size--24 or straight values like 2.4rem.
// For some reason, SCSS doesn't let you use CSS variables though.
:root {
--example: #{fluid(2.4rem, 4.8rem)};
--example-with-custom-breakpoints: #{fluid(2.4rem, 4.8rem, 64rem, 96rem)};
}
// If you're not calling the function as a CSS variable, you don't have to wrap it in #{}
// You can simply call it like this:
.example-class {
padding: fluid(2.4rem, 4.8rem);
}
// Which compiles into regular CSS as:
:root {
--example: clamp(2.4rem, 0.96rem + 0.03 * 100vw, 4.8rem);
--example-with-custom-breakpoints: clamp(2.4rem, -2.4rem + 0.075 * 100vw, 4.8rem);
}
.example-class {
padding: clamp(2.4rem, 0.96rem + 0.03 * 100vw, 4.8rem);
}
// So when you call these variables somewhere else, you just use something like:
.example {
padding: var(--example);
}
.example-with-custom-breakpoints {
font-size: var(--example-with-custom-breakpoints);
}
// Or simply like we did earlier:
.example-class {
padding: fluid(2.4rem, 4.8rem);
}
Haha, that’s a lot to take in, but I hope this makes sense. It’s really powerful and a massive timesaver in the long run. Also, you’ll notice there are SCSS variables used inside the function that are specific for the function only, so a good practice is to distinguish those variables from the global ones. I add an underscore before them, so I know which ones belong in the function exclusively and which don’t. For example, $random-variable is a global variable that can be used anywhere and $_specific-variable is specific to the function. It’s an easy way to keep your eyes from getting crossed when trying to figure things out!
