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

#css #html #webdev #beginners

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.

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

Sizing in CSS: px vs em vs rem by Chiamaka Ikeanyi

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;
}

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);
}

Result

index.css

h1 {
  font-size: 1.5em;
}

div {
  height: 12.5em;
  width: 25em;
}

Have an amazing day!

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Top comments (8)

FJones • Sep 19 '21

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"?