Converting px to rem with Sass

In working with web designers, I have found that they typically use pixels to indicate values of text size, spacing, etc.

The best practice from a web development perspective, however, is to use a relative value, like rem, instead of px.

These relative values are better in terms of responsiveness, accessibility, and user experience. For example, when the user adjusts the font size via the device’s accessibility settings, the size won’t be changed if it is set with pixels.

So web designers are used to using pixels while developers often use relative values like rem. This gap can make communication between designers and developers more difficult.

For instance, whenever a designer says a value to use in pixels, the developer has to manually convert it to rem and then use that rem value in CSS.

This can also be an issue when reviewing existing designs. Suppose the designer asks what the size of the title is - the developer has to manually convert the rem value back to pixels, since the rem value will not be so useful for the designer.

So how can we use rem instead of px while making communication with designers easier?

In fact, this can be achieved very easily with a simple SCSS function that translates the px value to rem. This way you as a developer can communicate with the designer using pixel values only. The translation to the rem value, which will be used for the end user, will take place automatically behind the scenes.

Add the following function to your scss file that contains all of the project functions (e.g. _functions.scss).

/// Converts px to rem:
/// the provided value is divided by 16.
/// (by default, 1rem equals to 16px).
///
/// @param {number} $px-value
@function px-to-rem($px-value) {
	@return ($px-value / 16) + rem;
}

Make sure the functions file is included (e.g. @import 'functions';) in the main scss file.

You can now simply use this function in any other scss file in this project. You will only need to provide the value in px while the CSS output will automatically use the corresponding rem value.

Let’s say the designer wants the large font size to be 24 pixels. This value in pixels can now be entered to the function in the Sass code:

.large-font-size {
	font-size: px-to-rem(24);
}

And the CSS output would be:

.large-font-size {
	font-size: 1.5rem;
}

Happy designers, happy developers, happy users :)