Sass Function to Auto-Convert Pixels to Ems

Function

Add this to your Sass (functions) file. It is recommended that you keep a separate functions.scss file and @import 'functions'; at the top of your main/global css file. This way it keeps things organized. OR you could just add this function to the top of your main scss file.

@function pem($pixels) {
  @return #{$pixels/16.0}em
}

Usage

Using scss syntax:

@media (min-width: pem(768)) {
  ...
}

When compiled to plain CSS and sent to the browser, we get:

@media (min-width: 48em) {
  ...
}