Modular Scale View Source

Returns the modular scale of a given number. Must provide a number value for the first argument. The second argument is a required integer for an increment value: ...-3, -2, -1, 0, 1, 2, 3... The third value is the ratio number.

Note: The function can be wrapped in sass's abs(), floor(), or ceil() functions to get the absolute value, round down, or round up respectively.

{% highlight scss %} div { // Increment Up GR with positive value font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px // Increment Down GR with negative value font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px // Can be used with ceil(round up) or floor(round down) font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px } {% endhighlight %}

Resources: modularscale.com & goldenrationcalculator.com