px 2 rem sass
Dominic Myers

Dominic Myers @mouseannoying

About: Front-end developer, Archer, Writer and Educator

Location:
Ely, UK
Joined:
May 6, 2020

px 2 rem sass

Publish Date: Jun 6 '21
0 0

I was working with a designer recently and so had to convert px measurements to REM. Given that I set the base font size to 16px, I figured the fastest way to develop some utility classes was using SASS. This script seems to generate enough utility classes and, should I need anything more for a class or id, I can use #{(1 / 16) * x}rem;, where x is the number of pixels from the designer.

@for $i from 1 through 32 {
    .f-s-#{$i}px {
        font-weight: #{(1 / 16) \* $i}rem;
    }
    .l-h-#{$i}px {
        line-height: #{(1 / 16) \* $i}rem;
    }
}

Enter fullscreen mode Exit fullscreen mode

Comments 0 total

    Add comment