Scalable font size, SASS (LESS) with "px" vs plain ems
===

I've read an article where it was proposed to use ems units to make font size scalable for mobile development:

	html {
		font-size: 16px; /* our base font size */
	}
	body {
		font-size: 62.5%; /* now our em = 10px */
	}
	/* and for example we want to make h1 = 30 pixels */
	h1 {
		font-size: 3em; /* target / context = 30 / 10 = 3
	}
	/* quite ugly in some cases */
	h3 {
		font-size: 0.6666666em; /* want 20 pixels, context 30 = 20/30 = 0.(6) */
	}

This is cool of course. The question is - if we are using some CSS preprocessing (SASS, LESS, custom) then probably we don't even need such approach and can use variables directly:

	$base-font: 10px;
	h1 {
		font-size: $base-font*3;
	}
	h3 {
		font-size: $base-font*2; /* it could be $base-font/3, still nice */
	}

Second option seems so much nicer, am I missing something?