Ever since reading Trent Walton’s post “Flexible Foundations,” I’ve felt a bit uncomfortable about (and a little ashamed of) all the px-based CSS I write.
I want to write ems—really, I do—but it’s hard to think purely in em’s when design tools like Fireworks primarily on pixel-based grids. There are cool sites out there that you with the tricky math, but it’s kind of difficult to get a good flow going when you’re constantly tabbing between your SASS/CSS sheet, the site or app you’re working on, and some other tool.
This function does the conversion for you, so instead of using a separate tool and throwing off the whole flow of your coding, you just write font-size: em(18px) or padding: 0 em(10px) write into your SASS sheets.
I like .SASS syntax more than .SCSS, so I forked Ian’s snippet and tweaked it: