Modular Scale Calculator

modular.scss

$rem_base: 16px !default;
$ratio: 1.5 !default;

@function whitespace_calculator($ratio, $i) {

  $value: $ratio;

  @if $i == 0 {
    $value: 0;
  }

  @if $i == -1 {
    $value: -1/$ratio;
  }

  @if $i == 1 {
    $value: 1/$ratio;
  }

  @if $i < -1 {
    @for $n from -2 to -1*($i) {
      $value: -($value/$ratio);
    }
  }

  @if $i > 1 {
    @for $n from 2 to $i {
      $value: $value * $ratio;
    }
  }

  @return $value + rem;
}

@for $i from 0 to 19 {
  $rem-value: whitespace_calculator($ratio, $i);
  .pm { padding: 0; }
  .p-#{$i} { padding: #{$rem-value}; }
  .pt-#{$i} { padding-top: #{$rem-value}; }
  .pr-#{$i} { padding-right: #{$rem-value}; }
  .pb-#{$i} { padding-bottom: #{$rem-value}; }
  .pl-#{$i} { padding-left: #{$rem-value}; }
  .px-#{$i} {
    padding-left: #{$rem-value};
    padding-right: #{$rem-value};
  }
  .py-#{$i} {
    padding-top: #{$rem-value};
    padding-bottom: #{$rem-value};
  }

  .m-#{$i} { margin: #{$rem-value}; }
  .mn-#{$i} { margin: -#{$rem-value}; }
  .mt-#{$i} { margin-top: #{$rem-value}; }
  .mtn-#{$i} { margin-top: -#{$rem-value}; }
  .mr-#{$i} { margin-right: #{$rem-value}; }
  .mrn-#{$i} { margin-right: -#{$rem-value}; }
  .mb-#{$i} { margin-bottom: #{$rem-value}; }
  .mbn-#{$i} { margin-bottom: -#{$rem-value}; }
  .ml-#{$i} { margin-left: #{$rem-value}; }
  .mln-#{$i} { margin-left: -#{$rem-value}; }
  .mx-#{$i} {
    margin-left: #{$rem-value};
    margin-right: #{$rem-value};
  }
  .mxn-#{$i} {
    margin-left: -#{$rem-value};
    margin-right: -#{$rem-value};
  }
  .my-#{$i} {
    margin-top: #{$rem-value};
    margin-bottom: #{$rem-value};
  }
  .myn-#{$i} {
    margin-top: -#{$rem-value};
    margin-bottom: -#{$rem-value};
  }
}