DEV Community

Dominic Myers
Dominic Myers

Posted on • Originally published at drmsite.blogspot.com on

px 2 rem sass

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

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay