No more clamp calculators: A SCSS function that saves me time

In web development, we need to achieve consistent and adaptive layouts, and this requires some specific calculations. I’ve been relying on 3rd-party tools to calculate the values I use for some CSS aspects like clamp(), but it started to be something that was too time-consuming and basically disruptive to my workflow.

Understanding clamp()

Clamp: clamp() in CSS is a functional that allows us to set a value that adjusts responsively within a specified range. It accepts three parameters: a minimum value, a preferred value (for me, always dependent on viewport width), and a maximum value. This ensures that properties like font-size (or other property values) can scale nicely and fluidly between set limits. This also means - no need to adjust values through media queries or other means.

Here’s an example of clamp being used:

.clamp-example {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

SCSS clamper

To make using clamp() easier in my projects, I looked into how those 3rd-party tools handle their calculations and built a simple SCSS function called clamper. This function takes care of the calculation for the preferred value, so I don’t have to keep jumping over to external sites every time I need a clamp value.

Here’s the function:

@use 'sass:math';

@function clamper($min-size, $max-size, $min-vw: 20rem, $max-vw: 80rem) {
  $slopeVal: math.div(($max-size - $min-size), ($max-vw - $min-vw));
  $interVal: $min-size - ($slopeVal * $min-vw);
  @return clamp(#{$min-size}, #{$interVal} + #{($slopeVal * 100vw)}, #{$max-size});
}

A breakdown

Parameters:
- $min-size: minimum size of the element (e.g. a font size or padding value)
- $max-size: maximum size of the element
- $min-vw: viewport width where the element reaches minimum size - I set as a small viewport e.g. on mobile (for a default I have 20rem)
- $max-vw: viewport width where the element reaches maximum size - I set as my the max width of the the site on large viewports (for a default I have 80rem)
Calculations:
- $slopeVal: this stores the rate of change between the minimum and maximum sizes relative to the viewport width
- $interVal: this stores the starting point of the size based on the minimum sizes and slope value
Return value:
- this returns the clamp() function output to ensure the size remains within the specified range, adjusting fluidly between the minimum and maximum sizes based on viewport width

Usage in SCSS

.my-clamped-text {
  font-size: clamper(1.25rem, 2rem); /* not passing a min-vw or max-vw as I'm ok with the default values */
}

When compiled, we get this CSS:

.my-clamped-text {
  font-size: clamp(1.25rem, 1rem + 1.25vw, 2rem);
}

How it helps me

By adding the clamper function into my SCSS workflow, I get some nice benefits:

Efficiency: It removes the need to switch between VS Code and an external calculator - I was forever flipping back-and-forth because I can never work out the preferred value on my own.
Consistency: It ensures consistent responsive sizing across the project, reducing the risk of discrepancies (or pesky miscalculations on my part.)
Maintainability: A charming single instance of logic for my responsive sizing.

Conclusion

The integration of the clamper function into my SCSS toolkit has significantly boosted my efficiency. By automating these preferred value calculations directly within the SCSS, I’ve reduced reliance on 3rd-party tools, reduced the number times I ‘just take a guess’, and simplified my workflow - even if it’s just a little improvement. Remember, every tiny bit helps!!