Long ago, in the dense mists of the Internet’s past, intrepid adventurers tackled danger in much the same way: sling a fixed 960px layout, fight in a set grid and fire their typography in pixels to ward off evil.
Responsive web design has since changed all that, bringing us out of that dense mist and into an age of enlightenment. And yet, using typography on the web is still a pain at times. With the push from pixels or points to percentages and ems, I find myself continuously having to Google “pixel to percentange conversion chart” or something similar at the beginning of every project and often during as well.
In frustration, I turned to the power of Sass to forge a new, all-encompassing function in my quest to vanquish these problems, and today we’re going to go through building that function.
It’ll allow us to convert freely between pixels, ems, and percentages without having to consult a chart every time and, hopefully, alleviate a lot of our headaches in the process.
I would recommend to use a more configurable approach using the base size of the html for converting, using the unit in the value for converting and output errors if input is wrong.
Hi @HugoGiraudel, thanks for your hint. I updated my Gist to better handle the unit conversion.
The only small issue I cannot solve is using '%' for comparison as % alone would lead to an Invalid CSS error.
