Convert pixels to rems automatically

Using rems in your CSS is a great way to deal with the many hurdles you’ll face building out a design across various screen resolutions.

Before we get ahead of ourselves assuming everyone knows what we’re talking about, here’s a quick primer on rems if you’re uninitiated. Feel free to skip this part if you’re already in the know.

A rem stands for “root em” and our buddy Jonathan Snook tells us that “the rem unit is relative to the root-or the html-element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.”.

In most modern browsers, 1 rem is equal to 16 pixels. So with a base size of 1rem (a.k.a. 16px) set, we can now use simple division to figure out proper sizing of elements. A headline that is 24px in Sketch is coded as 1.5rem because you take 24px and divide it by the base font size of 16px. This relative unit conversion makes scaling fonts and layouts with media queries a breeze.

But this leads us to one of the biggest criticisms of using rem units in CSS: the insane amount of calculating it takes to get a design comp from pixels to rems.

We know that using relative units of measurement are a great way to handle responsive web design. But using a rem to pixel conversion tool over, and over, and over again gets a tad bit monotonous. There has to be a better way, right? Lucky for us, there is.

A quick word about workflow

Before we get started though, it’s important to note that this method only works if you have a pre-processor in place. We use SCSS and Codekit to handle our dirty work. If you need help setting these up, Codekit’s documentation is a great place to start. Now, onward!

Finding a way to convert pixels to rems automatically

In our search for efficiently managing rems, we inspected our own process. One things we did know: we wanted to have a 1:1 hand off from designers to developers. But what does that mean?

That means if a designer makes a headline 24px with bottom margin of 36px, we wanted that reflected in the code and easily identifiable.

We also knew that we didn’t want to waste the developer’s time dividing a ton of numbers by 16px to get a rem percentage for our responsive layout. That’s no fun.

So after turning over a lot of stones, we settled on a combination of ideas from Foundation and a mixin article from CSS Tricks. The end result is a function that will convert pixels to rems on the fly. Here’s the code, we’ll break down how it works in a minute:

function.scss for units

Taking a look at the conversion process

Let’s say you have a file called styles.scss. To implement, you place this function at the top of the file so you can call on it throughout the cascade. Once you have your file in order, you simply pass the function rem-calc() where you want to output pixel-to-rem values. The arguments can either be a single number or multiple numbers, separated by a space (see examples below).

Let’s take a simple example of adding bottom margin to a container div with a class of .container.

<div class="container"> <p>Content here</p> </div>

To add 10px of bottom margin, you would add your CSS like this using the function value from above:

div.container { margin-bottom: rem-calc(10); /* 10 is the amount of margin you want in pixels */ }

Once run through the processor, you’ll see the output as:

div.container { margin-bottom: 0.625rem; /* 10 divided by 16 */ }

To use this function with multiple parameters, setting up multiple margins in your CSS would look like this:

div.container { margin: rem-calc(11 16 12 8); /* Numbers are the amount of margin you want in pixels */ }

With the output after processing being:

div.container { margin: 0.6875rem 1rem 0.75rem 0.5rem; /* All margins divided by 16 */ }

A practical way to make your site more flexible

Most design tools output their values (distances, font sizes, dimensions, border widths, etc.) in pixels. With this function, you won’t have to worry about making those pesky conversions anymore.

Designers are happy because their designs stay true to scale. Developers are happy because they don’t have to whip out their calculators every 5 minutes.

The end result are more flexible web sites and applications and a delighted team. It doesn’t get much better than that!

— Written by @mattdowney

Did you like that article? Sign up for our weekly newsletter and we’ll send a new one to you every Friday. 🙌

When you subscribe to our newsletter, you’ll get the inside scoop on all the latest happenings around the 45royale camp. More importantly, we’ll send you resources to help refine your own design and development process, harness agility in your creativity, and stay inspired to meet your work with fresh eyes. Sound good? Giddyup!

Sign up today!