By now, you probably figured out what rem units are and why you should use them. But, the tricky part is to calculate them (at least, in your head). Luckily, using Sass, it's really easy to convert any value into rem, and we can achieve that in 3 ways or methods, using mixins and functions.
Method 1 - using a @mixing
with predefined property
Let's say we have a 400px wide div
, but we want to convert that width
value to rem. The easiest way would be by using a mixin with predefined property. We know 1rem equals to 16px, and our div
is 400px wide, so the basic calculation is: 400 divided by 16. To calculate it with Sass, we could create a simple mixin like this:
@mixin width($value) {
width: ($value / 16) + rem;
}
div {
@include width(400);
}
This method works well, but the problem is - you have to define a new mixin for every property. That could easily spun out of control. But if you only have a few mixins, it could work. After all, it's the easiest method.
Method 2 - using a @mixing
with 2 arguments
To avoid creating a new mixin for every property, we could create a mixin with 2 arguments - CSS property and value. Note that a property statement is not a number, so we have to convert it to string by wrapping it into #{}
.
@mixin toRem($property, $value) {
#{$property}: ($value / 16) + rem;
}
div {
@include toRem(width, 400);
}
This method is much more flexible, but for every new CSS property we have to use a new @incude
call. Unfortunately, we can call only one set of arguments per @incude
. That could potentially lead to a readability problem, for example:
@include toRem(width, 400);
@include toRem(height, 400);
@include toRem(font-size, 16);
@include toRem(margin, 20);
//etc
Method 3 - using a function
Third method is by using a Sass @function
. Unlike mixin, which in previous methods "generated" CSS, our function will only calculate the value. In a function, we have to use @return
rule to indicate the value to use as the result of calling that function. We can use that function with any property.
@function toRem($value) {
$remValue: ($value / 16) + rem;
@return $remValue;
}
div {
width: toRem(400);
height: toRem(400);
}
Although this method surely seems like a number one go-to method, remember that a function only generates a value.
Which method to use?
Well, I'd say, try all three. They all have their advantages and limits, so check a pen below with all of the examples, and experiment... It's up to you to decide which one suits your purpose the best.
If you liked this article, consider buying me a coffee.
Top comments (8)
Thanks Nikola! No matter which of the three methods you prefer, I would suggest two improvements.
math.div
for division instead of/
operator as using/
for division is deprecated and will be removed in Dart Sass 2.0.0.Amazing, it's fully supported!
Many thanks for the inspiring methods :)
Wonder if would be possible to make the
16
in$remValue: ($value / 16) + rem;
dynamic, say some var--baseline
defined at:root
? The scenario is16
can change based on@media query
of CSS.Regards :)
Riting
Hey, i have the same question.
What happen if the 1rem is equal to 32px?
That value depends on the user's browser settings.
In that cases the function don't work properly
Thanks, Nikola, for telling us these methods to convert px to rem using Sass. They are indeed very helpful.
I just wrote an article explaining why web developers should prefer to use rem to size fonts and different elements in their designs.
I think beginner web developers who aren't familiar with the Sass and wants to use and learn more about rem should give it a read.
I hope you wouldn't mind me linking it here.
By the way I followed you on twitter and checked some of your pens on code pen. I found your work pretty interesting.
Anyways, happy coding!
Great blog post on converting px to rem using Sass! If you're looking for a convenient tool to assist you in this conversion process, I highly recommend checking out LambdaTest's free online "rem to px converter." It's a user-friendly tool that can save you time and effort by effortlessly converting your measurements. You can access the tool here: REM to PX Converter
very informative, I already using method 3
This was a very clutch suggestion! Thanks