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) {
...
}