SASS/Compass Typo Toolbox

Everyone post their favorite SASS goodies these days, so here’s one of mine: tackling vertical rhythm in rem units.

The px-rem() mixin I found come in particularly handy when I wanted to support IE8 and Opera Mini who seem to be the only ones of their kin not able to deal with rem properly. It bloats CSS quite badly, though, and I’d probably just ditch it nowadays.

The px() function I used a lot with unitless values. One shouldn’t just do $unitless + px I learned, but rather (as in the function) 0px + $unitless.

Any feedback would be greatly appreciated, I’d love to learn what you would do differently and why. If you happen to find the code helpful, have fun putting it to use!

Also, I can recommend reading up articles from Hugo Giraudel and—wer’s in deutsch mag—Sven Wolfermann for all things SASS.


Heads up! Make sure to use Compass with the code samples below, or replace Compass functions like round() with your own custom ones.

On GitHub: