mozilla’s own example of a working clamp function doesn’t work

I’ve been spend­ing the past day go­ing grey, ex­clu­sively try­ing to fig­ure out how to take this SCSS func­tion that I made, and turn­ing it into some­thing made out of pure CSS cus­tom prop­er­ties. When I tin­ker with my site, I like to just in­spect it with de­v­tools and then mess around first, since that’s the most di­rect path to my site, but since I’m only see­ing the fi­nal prod­uct of that func­tion, I can’t re­ally do that. All my font size prop­er­ties look like this:

:root {
    --size-h5: clamp(1.125rem,.8437rem + 1.4065cqi,1.4063rem);
    --size-h4: clamp(1.2656rem,.7734rem + 2.461cqi,1.7578rem);
    --size-h3: clamp(1.4238rem,.6503rem + 3.8675cqi,2.1973rem);
    --size-h2: clamp(1.6018rem,.457rem + 5.724cqi,2.7466rem);
    --size-h1: clamp(1.802rem,.1708rem + 8.156cqi,3.4332rem);
}

Unless I al­ready knew the fi­nal cal­cu­la­tion that makes up that mid­dle value for each clamp, I’d have no clue how to turn this into any­thing other than the ex­act sizes I put it at… and if I knew that, it’s prob­a­bly be­cause I’m al­ready in my SCSS file. Obviously, not great!

But, al­right, it should­n’t be that bad, right. I mean, look at this:

@function clmp($min, $max, $width-min: 20rem, $width-max: 40rem) {
    $slope: calc(($max - $min) / ($width-max - $width-min));
    $slopeunit: calc(100cqi * $slope);
    $baserem: calc($max - $width-max * $slope);
    @return clamp($min, $baserem + $slopeunit, $max);
}

It is, quite lit­er­ally, al­ready a bunch of calc() func­tions! The thing CSS al­ready has! Surely, this’ll be easy.

It is by this point that I am about to re­veal that it ex­tremely is­n’t–and in my de­fense, if you looked at the sites I’m learn­ing off of, you’d never know that. See, if you go on MDN for clamp(), you’ll see a bunch of ex­am­ples of work­ing syn­tax, like so:

/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

Alright, makes sense! For the clamp func­tion I use to work in pure CSS, it’d prob­a­bly be some­thing like that last ex­am­ple, just with cus­tom prop­er­ties in­stead of num­bers. I’m pretty sure peo­ple say you don’t need the calc(), but let’s hu­mor it and put it into this lit­tle demo zone for a font size, shall we?

Hm. That’s not good. Taking out the calc() does­n’t help, for the record; what does is specif­i­cally tak­ing out just the part where there’s di­vi­sion.

I would like to re­it­er­ate that this is not an ex­am­ple pulled out of my ass. I used an ex­am­ple of syn­tax, that MDN it­self thinks its valid, and on every com­bi­na­tion of plat­form and web browser on hand, it is­n’t. As far as I can tell, this is­n’t even a prob­lem with clamp, be­cause di­vi­sion in CSS just works like that? Like, the rule has al­ways been that you can’t di­vide by an­other unit???

/* so like, this works */
calc(100px + 10cqi);

/* but this doesn't */
calc(100px / 10cqi);

/* but this does */
calc(100px / 10);

Which is fair enough, be­cause I imag­ine one of the rea­sons calc() does­n’t feel like shit per­for­mance-wise is be­cause you cut out all the weird edge cases di­vid­ing units by one an­other might cause, but… why is it an ex­am­ple, then?

Maaaaaan. At least I know now, I sup­pose.