Thank you heaps for introducing me to the separation of concerns principle, totally get you and…
OnTheLine
1

First of all, let me see if I understand what you are wanting. You want 0 (zero) padding at width = 0. Then at 15rem you want to have 1rem of padding. And then anything above 15rem would go back to zero padding again?

I think that you will definitely get a big jump that you can’t smoothly transition or interpolate between. The whole point of the solution is that you can provide 2 values at 2 different viewport widths and then it will interpolate between them. That works for you between 0 and 15 rem width. But after that… How would you interpolate between 1rem padding @ 15rem and 0rem padding @ 15.000001rem? It sounds like a design decision where you don’t really want to do any interpolation at all between those breakpoints and in that case, the mixin definitely won’t work for you. I suppose you could feed it a value at 15.000001rem and it would output the proper code for you. But it wouldn’t look good imho.

My mixin is not made to cover 100% of all edge-case scenarios. If anything I hope that it’s at least an eye-opening solution to developers that we can smoothly scale unit values using linear interpolation. If there is some edge case like this, that the mixin doesn’t cover, I would definitely recommend to look at the linear-interpolation SASS function I provided. That is the nuts and bolts of the Poly Fluid Sizing mixin anyways. You can easily just use that function on it’s own if you want to roll your own slightly different solution.

Show your support

Clapping shows how much you appreciated Jake Wilson’s story.