We are available for hire, find out more.

RSS Feed

A very simple Modular Scale calculator using SASS

By John ~ Thursday, 01 November 2012

A quick Google search reveals that someone has, of course, already written a pretty full on Modular Scale calculator using SASS which I assume, at a glance, puts ours to shame.

Still, there’s something satisfying about thinking for yourself once in a while and the Rationalist Association project has been an opportunity to brush the cobwebs off my CSS editor and find out what the youth have been up to whilst I was gone, it seems they have been busy! Also Rach has been coding away for 12 months solid, so she’s had to endure a million questions a minute these last few months, starting with, “What the hell happened to CSS? I don’t understand it any more!”.

I’m grey enough around the gills to remember a time when CSS constants was the must have style-sheets accessory. This was way before the likes of Codekit showed up with your LESS and your pre-processors. Back then we had to think about IE5… on a Mac! CSS3? HTML5? transitions? Pffft, back then we just had the box model hack and we were grateful. You people, you don’t know you were born… ahem, where was I?

Oh, yes, simple Modular Scale Calculator just because we liked thinking about it.

Inspired by http://modularscale.com/


/* @group modular scale calculator use Ems@16 */

/* http://modularscale.com/scale/?px1=19&px2=14&ra1=1.618&ra2=0 */
$ratio:1.618;
$default:16; /* current accepted ‘default’ pixel size browsers use */
$base-number:19;
$important-number:14;

/* $a-scale is based on $base-number and give bigger numbers */
$a-scale:$base-number/$default; /* this is the base font size */
$a-scale-2:$a-scale*$ratio;
$a-scale-3:$a-scale-2*$ratio;
$a-scale-4:$a-scale-3*$ratio;
$a-scale-5:$a-scale-4*$ratio;
$a-scale-6:$a-scale-5*$ratio;

/* $a-scale- is based on $base-number and give smaller numbers */
$a-scale-:$a-scale;
$a-scale—2:$a-scale-/$ratio;
$a-scale—3:$a-scale—2/$ratio;
$a-scale—4:$a-scale—3/$ratio;
$a-scale—5:$a-scale—4/$ratio;
$a-scale—6:$a-scale—5/$ratio;

/* b-scale is based on $important-number */
$b-scale:$important-number/$default; /* these are additional numbers based on $important-number */
$b-scale-2:$b-scale*$ratio;
$b-scale-3:$b-scale-2*$ratio;
$b-scale-4:$b-scale-3*$ratio;
$b-scale-5:$b-scale-4*$ratio;
$b-scale-6:$b-scale-5*$ratio;


/* @end */