Work in progress… mixins for Stylus that handle 16px root em in a way that still gives you pixel parity

rem16px.styl

// Mixins

// Since some horrible browsers (e.g., on *spit* Android) don’t let you change the
// root em, I’m forced to use the browser default of 16px as the base. This mixin
// will help me keep sane by using units that correspond to pixel units.

line-height(h)
	if unit(h) == "rem"
		line-height: unit(h, 'px')
		line-height: unit(h/16, 'rem')
	else
		line-height: unit(h, unit(h))

margin(t, r, b, l)
	margin: unit(t, 'px') unit(r, 'px') unit(b, 'px') unit(l, 'px')
	margin: unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') unit(l/16, 'rem')

margin-left(l)
	if unit(l) == "rem" or unit(l) == ""
		margin-left: unit(l, 'px')
		margin-left: unit(l/16, 'rem')
	else
		margin-left: unit(l, unit(l))

margin-right(r)
	margin-right: unit(r, 'px')
	margin-right: unit(r/16, 'rem')

margin-top(t)
	margin-top: unit(t, 'px')
	margin-top: unit(t/16, 'rem')

margin-bottom(b)
	margin-bottom: unit(b, 'px')
	margin-bottom: unit(b/16, 'rem')

padding(t, r, b, l)
	padding: unit(t, 'px') unit(r, 'px') unit(b, 'px') unit(l, 'px')
	padding: unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') unit(l/16, 'rem')

padding-left(l)
	padding-left: unit(l, 'px')
	padding-left: unit(l/16, 'rem')

padding-right(r)
	padding-right: unit(r, 'px')
	padding-right: unit(r/16, 'rem')

padding-top(t)
	padding-top: unit(t, 'px')
	padding-top: unit(t/16, 'rem')

padding-bottom(b)
	padding-bottom: unit(b, 'px')
	padding-bottom: unit(b/16, 'rem')

font-size(s)
	font-size: unit(s, 'px')
	font-size: unit(s/16, 'rem')

max-width(w)
	if unit(w) == "rem" or unit(w) == ""
		max-width: unit(w, 'px')
		max-width: unit(w/16, 'rem')
	else
		max-width: unit(w, unit(w))

border-radius(r)
	border-radius: unit(r, 'px')
	border-radius: unit(r/16, 'rem')

/* Border */

abstract-border(borderType, borderArgs, originalArguments)
	value = borderArgs[0];

	// Only  'none'
	if typeof(value) is "unit"

		style = borderArgs[1];
		color = borderArgs[2];

		if unit(value) == "rem"
			{borderType} unit(value, 'px') style color
			{borderType} unit(value/16, 'rem') style color
		else
			{borderType} value style color
	else
		{borderType} originalArguments

border(args...)
	abstract-border("border", args, arguments)

border-top(args...)
	abstract-border("border-top", args, arguments)

border-right(args...)
	abstract-border("border-right", args, arguments)

border-bottom(args...)
	abstract-border("border-bottom", args, arguments)

border-left(args...)
	abstract-border("border-left", args, arguments)


width(w)
	if unit(w) == "rem" or unit(w) == ""
		width: unit(w, 'px')
		width: unit(w/16, 'rem')
	else
		width: unit(w, unit(w))

Just author using rems and you can visualise the size of elements and their margins, padding, etc., because (at the default 16px root em), 1rem = 1px.

Again, it’s a work‐in‐process, not some fancy framework, so it’s not complete, etc. Just building it as I work on Breaking Things (http://breakingthin.gs)