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.
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
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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.
