Last Updated: February 25, 2016
·
756
· jjkilpatrick

Convert PX to EM in SCSS

When developing responsive websites it is important to use a non absolute unit. Em is perfect for this as its relative to the base font size. If like me, you grew up using PX and find it hard to think purely in em's then this function is for you!

@function em($target, $context: $baseFontSize) {

    @if $target == 0 { @return 0 }

    @return $target / $context + 0em;

}

// Usage:</p>
```
h1 {

font-size: em(50px, 18px);

}
```