While working on a project (to be announced) creating responsive design templates from PSDs, I wanted to structure the positions and sizings in a way that allowed the greatest flexibility and sanity. Enter EMs. A great technique but requires conversion of pixels to EMs based on the current font size leaving you with cryptic “0.875em” and “1.125em” expressions throughout your CSS. Not the most maintainable code. A Sass mixin allows expressing measurements in pixels in code while using EMs in the final output.
UPDATE: I’ve published the code I use in a bunch of projects as a gist: PX to EMs conversion
Motivation and Usage
Say you have a base font size of 16 pixels and want something 25 pixels. You could express it this way:
Perhaps a better version would be the following:
Which would result in the same output.
In fact, we can create a version allowing us to express any CSS expression where we use pixels to do the conversion:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
scale Sass mixin (and function)
The following is the mixin and function I ended up with allowing each of the given usages:
Moving this out into a custom extension in Ruby would have made the code cleaner but would have added an external dependency. Having the mixin in the same .scss makes it easier to work with (for now).
The largest improvement I would make to this is it’s dependence on the base font size. Ideally, whenever you call
scale() it could inspect the current font size in the stylesheet and automatically pick the best one rather than assuming 16px or having to specify it.
A new unit
Another approach could be to introduce a new Sass unit: pem (px + em = pem). This would allow extending Sass to automatically interpret a measurement in this unit and translate to EMs in the final output based on the current font size:
Assuming a base font size of 16 this would result in:
What approaches have you taken to deal with the pixel / EM relationship?