Converting Your Typographic Units with Sass

Typography Units Conversion with Sass

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 by 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 even throughout.

In frustration, I finally turned to the power of Sass to forge a new, all-encompassing function in my quest to vanquish these problems, and today you’re going to build that function with me.

It’ll allow you to convert freely between pixels, em, and percentage values without having to consult a chart every time and, hopefully, alleviate a lot of your headaches in the process.

Setting Things Up for Typographic Units Conversion in Sass

Firstly, it’s extremely important to have a default font-size defined in your CSS. Most browsers will default to 16px, but if your project requires something different, make sure that your CSS knows about it. Also, most boilerplates come with 16px defined as their default value, therefore I’m going to assume this as the default for this tutorial, too.

You then need to decide which units you’re going to support. Since this is likely to be helpful in a print to web environment, or even just a project which starts in Photoshop and ends up in the browser, you’ll be looking at pixels, points, ems and percentage.

You also want to give yourself the option of converting freely between them, so you can already say that your function needs at least three arguments:

[code language=”sass”]
@function convert($value, $currentUnit, $convertUnit) {}

The first argument is the font-size number whose unit you wish to convert (for example 16), the second is the unit you’re planning to convert (for example pixels), and the third one is the desired unit you’re aiming for (like percentage). So, as an example, if you want to convert 16 pixels into a percentage value, you would do this:

[code language=”sass”]
font-size: convert(16, px, percent);

Which will give you:

[code language=”css”]
font-size: 100%;

Let’s Beef It

Now, it’s time to tackle the bit that goes in between the braces.

Firstly, you want to be able to tackle pixels, ems, points and percentages, so you’ll need four statements to take care of them all.

If you were using a full-fledged programming language, you might use a switch statement. Since this is Sass, you’ll stick with if statements:

[code language=”sass”]
@function convert($value, $currentUnit, $convertUnit){
@if $currentUnit == px{

// stuff for pixels

}@else if $currentUnit == ems{

// stuff for ems

}@else if $currentUnit == percent{

// stuff for percentage

}@else if $currentUnit == pts{

// stuff for points


You now have an if statement for each possible input unit (whether you want pixels, ems, points or percentages to start with). So this is about 50% of the way there. All you have to do now is throw some awesome stuff into those if statements!

Continue reading %Converting Your Typographic Units with Sass%

Source: Sitepoint