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