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, especiall…


This content originally appeared on DEV Community and was authored by Aya Bouchiha

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

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!


This content originally appeared on DEV Community and was authored by Aya Bouchiha


Print Share Comment Cite Upload Translate Updates
APA

Aya Bouchiha | Sciencx (2021-09-18T21:56:48+00:00) Are You Bored Of Converting “px” to “em” Using A Calculator, SASS Will Solve The Problem. Retrieved from https://www.scien.cx/2021/09/18/are-you-bored-of-converting-px-to-em-using-a-calculator-sass-will-solve-the-problem/

MLA
" » Are You Bored Of Converting “px” to “em” Using A Calculator, SASS Will Solve The Problem." Aya Bouchiha | Sciencx - Saturday September 18, 2021, https://www.scien.cx/2021/09/18/are-you-bored-of-converting-px-to-em-using-a-calculator-sass-will-solve-the-problem/
HARVARD
Aya Bouchiha | Sciencx Saturday September 18, 2021 » Are You Bored Of Converting “px” to “em” Using A Calculator, SASS Will Solve The Problem., viewed ,<https://www.scien.cx/2021/09/18/are-you-bored-of-converting-px-to-em-using-a-calculator-sass-will-solve-the-problem/>
VANCOUVER
Aya Bouchiha | Sciencx - » Are You Bored Of Converting “px” to “em” Using A Calculator, SASS Will Solve The Problem. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/18/are-you-bored-of-converting-px-to-em-using-a-calculator-sass-will-solve-the-problem/
CHICAGO
" » Are You Bored Of Converting “px” to “em” Using A Calculator, SASS Will Solve The Problem." Aya Bouchiha | Sciencx - Accessed . https://www.scien.cx/2021/09/18/are-you-bored-of-converting-px-to-em-using-a-calculator-sass-will-solve-the-problem/
IEEE
" » Are You Bored Of Converting “px” to “em” Using A Calculator, SASS Will Solve The Problem." Aya Bouchiha | Sciencx [Online]. Available: https://www.scien.cx/2021/09/18/are-you-bored-of-converting-px-to-em-using-a-calculator-sass-will-solve-the-problem/. [Accessed: ]
rf:citation
» Are You Bored Of Converting “px” to “em” Using A Calculator, SASS Will Solve The Problem | Aya Bouchiha | Sciencx | https://www.scien.cx/2021/09/18/are-you-bored-of-converting-px-to-em-using-a-calculator-sass-will-solve-the-problem/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts