Generated by SassMeister.com.

SassMeister-input-HTML.haml

- (1...13).each do |i|
  .column= i

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

$base-fontsize: 15px;
$base-lineheight: 20px;

@function pow($val, $pow) {
  $res: 1;
  @while($pow > 0) {
    $res: $res * $val;
    $pow: $pow - 1;
  }
  @return $res;
}

@function magic-size($size) {
  $base: $size / ($size * 0 + 1);
  $ratio-adjustment: 9;
  // make this smaller to get a smaller ratio between small and large fonts
  @return calc(#{$size - pow($base / $ratio-adjustment, 2)} + #{pow($base / ($ratio-adjustment * 3), 2)}vw);
}

@mixin font-size($size) {
  $magic-size: magic-size($size);
  font-size: $size;
  font-size: $magic-size;
  content: "viewport-units-buggyfill; font-size: #{$magic-size}";
}
h1 {
  @include font-size(18px);
}

SassMeister-output.css

h1 {
  font-size: 18px;
  font-size: calc(14px + 0.44444vw);
  content: "viewport-units-buggyfill; font-size: calc(14px + 0.44444vw)";
}

SassMeister-rendered.html

<div class='column'>1</div>
<div class='column'>2</div>
<div class='column'>3</div>
<div class='column'>4</div>
<div class='column'>5</div>
<div class='column'>6</div>
<div class='column'>7</div>
<div class='column'>8</div>
<div class='column'>9</div>
<div class='column'>10</div>
<div class='column'>11</div>
<div class='column'>12</div>