Sass modular scale function

in code

A mixin for modular scale sizes popped up on Reddit. It wasn’t written well – it tied a bunch of unit measurements together, and was fixed to use the em unit.

Wait – just what the heck is modular scale? It’s a ratio which you set, and each increment of font-size (or whatever) equates to an increment of the ratio.

@function modular-scale($increment, $base-size, $ratio) {
    // Either increase (increment > 0) or decrease 
    // (increment <= 0) $base-size by $ratio through 
    // the given number of $increment units.
    @for $i from 1 through $increment {
        @if $increment > 0 {
            $base-size: $base-size * $ratio;    
        } @else {
            $base-size: $base-size / $ratio;

    @return $base-size;

You can play with it on Sassmeister.

March 20

in me

Your email address will not be published. Required fields are marked *