CSS clamp() and writing a custom function using Sass

So you may or may not have heard of the clamp function in CSS. The clamp function is used to “clamp” down 2 values, as the name suggests. The function takes in 3 parameters, which are the min, preferred, and max values.

font-size: clamp(min, preferred, max);

The clamp function is particularly useful for responsive web design, where you need your content to scale according to the window size. The min parameter represents the smallest size that you want your content to be, and conversely, the max parameter represents the largest size your content should be. The preferred parameter is a bit more tricky. Instead of being a static, unchanging value such as min and max, the preferred value represents the current size of your content. In order for it to represent your current size, it needs to have a unit that is changing based on the viewport. So these are units like vw, vh, and %. Most commonly used are the vw and % units, which scale with the viewport width. To better understand this, let’s look at an example:

font-size: clamp(16px, 2vw, 32px);

The above function basically sets the min font-size to 16px and the max font-size to 16px. The 2vw represents 2% of the entire window width. The clamp function will ensure that the font-size is 2% of the window with, whatever that may be, and never dips below 16px or overflows 32px.

A part that is confusing for many people is what should I set the preferred value to? It’s not entirely intuitive to set my font-size to 2vw. A problem is that view widths are not very consistent. Depending on the size of your device, a view width can be 19.2px if you’re on a 1920x1080 device, or it could be greater if viewing on a 2440x1440 device. Luckily, there is a solution so that you’re not just guessing what to put as the preferred value.

Luckily, there is a solution. What you’re looking for is basically a way to scale your size linearly. To do this, I’m going to refer to another article written by Pedro Rodriguez at CSS-Tricks. The solution that the article uses takes into account not only the minimum and maximum content size, but also the minimum and maximum window width. By incorporating both min and max window widths, you are able to create a formula to scale your content linearly. Fortunately, the formula is not very complicated. Pedro has simplified the formula for us, as it’s simply :

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth) yAxisIntersection = -minWidth * slope + minFontSize
preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

So there we go, we can now create our linearly scaling clamp function.

But now if we want to use it, we’d have to manually enter our numbers and calculate it. This can be quite tedious, but fortunately, with the power of Sass functions, we create a custom clamp function quite easily.

First make sure you have Sass installed in your project. Then we’re going to create a Sass function with the 4 values in the formula as parameters.

Then it’s really as simple as defining the slope, y-axis, and preferredValue from the formula as variables.

Use #{$var_name} syntax in Sass calc functions

Note that we divide minViewWidth and maxViewWidth by 16, which is because the formula is calculated using rem, which are 16px by default.

Now you can use the function in place of the regular clamp() function.