This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Semantic HTML5 markup
- SCSS and with a custom formula to convert px into rem.
- CSS Grid
- Mobile-first workflow
I made a function in SCSS to convert pixels into rem:
$base-font-size: 15px;
// Function to strip the units from a number. See https://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
@function strip-units($number) {
@return math.div($number, $number * 0 + 1);
}
// Function that converts any pixel measure into rem.
@function pxrem($px) {
$strip-unit-base-font: math.div($px, strip-units($base-font-size));
// Only two digits after the decimal point. Thanks to https://stackoverflow.com/questions/10369643/rounding-numbers-in-sass-and-adjusting-the-amount-of-decimals/38449536
$result: math.div(round($strip-unit-base-font * 100), 100);
@return $result + rem;
}
$base-font-size
is the font-size
of the html tag. If $base-font-size
is 15px, that would be 1rem. If for example I want a padding
of 26px, but I want to use the rem equivalent, I will write: padding: pxrem(26)
. When compiled in css that will become padding: 1.73rem
.
- This function to strip the units from a number in SCSS.
- Function to limit the number of decimals in SCSS
- Frontend Mentor - @Filippo-B