DEV Community

Cover image for Are You Bored Of Converting "px" to "em" Using A Calculator, SASS Will Solve The Problem
Aya Bouchiha
Aya Bouchiha

Posted on

19 5

Are You Bored Of Converting "px" to "em" Using A Calculator, SASS Will Solve The Problem

Hi, I'm Aya Bouchiha, today, I decided to share with you the solution of converting "px" to "rem" or 'em' using a calculator because using It, will distract you to focus more in your work, and will let you waste a considerable amount of time, especially if the project is so big or your computer is slow.

Aya Bouchiha

What's px?

  • px: is an absolute unit for measuring.

What's them?

  • em: is a relative unit to the font-size of its parent, used for measuring, It is equal to 16px.

px vs em vs rem

Converting px to em

by default:
1em = 16px
pxValue = emValue * 16
emValue = pxValue / 16

Should I Use A Calculator For Converting px to em?

  • If you are familiar with scss, the answer is no, no, and no! so how?

Creating A Function For Converting px to em

index.scss

@function to-em($val-px){
    @return ($val-px / 16) + em;
}
Enter fullscreen mode Exit fullscreen mode

Testing Our Function

index.scss

// index.scss

// px => em
@function to-em($val-px){
    @return ($val-px / 16) + em;
}

h1 {
    font-size:to-em(24);
}
div {
    height: to-em(200);
    width: to-em(400);
}
Enter fullscreen mode Exit fullscreen mode

Result

index.css

h1 {
  font-size: 1.5em;
}

div {
  height: 12.5em;
  width: 25em;
}
Enter fullscreen mode Exit fullscreen mode

Have an amazing day!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (8)

Collapse
 
fjones profile image
FJones

em [...] is equal to 16px

What? No. 1rem is usually equal to 16px, because that's the common default value for root level font-size, but that's neither the value of 1em, nor in any way a value you should just assume. As soon as you get any nested font-size declarations, this method falls apart very quickly, and unless you apply it extremely consistently (or force a root font size), scaling gets thrown off a bit by this.

Don't calculate em based on px values! Familiarize yourself with how font-size works, and consider specifically what you want to achieve: Do you want your type to scale with the user's (or container's) font-size, or do you simply want to avoid using px values "because that's best practice"?

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Thank you for the feedback 🙏🏻

Collapse
 
abhilearnstocode profile image
Abhii

Short and to the point!

Just one suggestion..
Instead of kebab-case, it would be good if you use camelCase as I happen to read the function as 'value - px divided by 16' 😣

There might be more like me or I may also happen that I've just woke up from sleep 😁.

Once again, keep bringing new articles. 🤩

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Thank you a lot for your feedback, have an amazing day!

Collapse
 
amircahyadi profile image
Amir-cahyadi

👍

Collapse
 
ayabouchiha profile image
Aya Bouchiha

😊

Collapse
 
ranemihir profile image
Mihir Rane

I actually didn't even know about 'em' or 'rem' , so I read your linked article 'Sizing in Css: px vs em vs rem'. Keep up the good work!

Collapse
 
ayabouchiha profile image
Aya Bouchiha • Edited

I appreciate that a lot!

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay