The Golden Ratio in SASS and CSS development

I recently worked on a web site project where the design I received to work on had multiple cards that seemed very much close to what I remembered as the golden ratio but after measuring them I realised the designer didn’t actually follow the rule and I decided to amend it.

The golden ratio is the ratio of 1 to 1.6180334 that seem to appear very often in Nature. Many scientists and artists believe that the human eye finds this ratio beautiful. Read more about this magic number on livesience.

The golden ratio appearing in Nature

Double checking the designs is one of the times when your golden mean caliper would come in handy … just make sure you don’t show your tool to the designer if you don’t want to upset anyone.

A Golden Mean Caliper

The actual idea I’m promoting here is to start using the golden ratio in your development work and if you notice a ratio in a design that is very close but not actually 1 to 1.618 then amend it after discussing it with the designer as it will probably look better in most cases.

Using the golden ratio in SASS

For a very simple example we start off by storing the ratio in a variable in SASS.

$phi: 1.6180339887498948482;

Later on we can use this variable for calculating the sizes of two boxes:

$base-width: 250px;
.smaller-box {
    width: $base-width;
    height: $base-width;
}
.larger-box {
    width: $base-width * $phi;
    height: $base-width;
}

Or to create a golden rectangle:

.golden-box {
    height: 100px;
    width: 100px * $phi;
}

The golden ratio can also be applied to section a circle and the full 360˚ angle. You can try experimenting with the golden angles which are 222.5˚ and 137.5˚.

This is how you can calculate this with SASS:

$phi: 1.6180339887498948482;
$small-angle: 360 / ($phi + 1);    // 137.5
$large-angle: 360 - $small-angle;  // 222.5

I hope this simple example sparkled some creative ideas for your next project and that you already ordered your caliper from Amazon.