Tag Archives: Bugs

SASS, Gumby, Modular-Scale and $golden

SASS, Gumby and Modular-Scale

The days of hand-coding CSS are over. We’re now in the era of pre-processors, basically, programming environments to make building today’s very complex CSS easier and simpler. Coders being what they are, immediately started creating frameworks. My criteria was that it needed to be semantically grid-based and responsive with the least amount of fuss possible.

I decided to try the Gumby framework out. It’s pretty complete and has tonnes of quick UI stuff for making life easier.  I suspect that the digital surgeons did what I would do: collect the best and coolest of all the toys available, and roll them into one framework. Unfortunately, for all the goodies there are a number of gotchas. Hopefully this will be useful to you.

Squashin’ the $golden bug

I had to work though a chain of errors to finally find

Syntax error: Undefined variable: $golden

Before you bash your brains out, as I did for quite some time, try this quick fix: If you’re using the Gumby SASS framework, it wants to give you modular-scale. Great idea. I love it. Find the file var/_settings.scss jump to line 49 or so (search for $golden) and replace it with the basic golden ratio: 1.6180339887

Thus, replace:
$ratio: $golden !default;
with:
$ratio: 1.6180339887 !default;

Alternately, simply define
$golden: 1.618;
// (Not really necessary to have 10 place precision :))

I am not intimately familiar with the inner-workings of SASS, Compass, Gumby or Modular-Scale.

Is this the “correct” fix? I think so, but that’d be the qualifier: I think so. There’s a part of me that tells me that we’re dealing with the sequencing of includes, but despite my shuffling them around like a pea-in-a-cup, I found no love.

I welcome anyone’s feedback on the matter, especially any of the developers of the above-mentioned products.