Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$bp-0: 320;
$bp-1: 420;
$bp-2: 576;
$bp-3: 768;
$bp-4: 1024;
$bp-5: 1280;
$bp-6: 1440;
$bp-7: 1680;
$bp-8: 1920;

$font-size: (
  xs: 10,
  s: 14,
  m: 16,
  ml: 18,
  l: 24,
  xl: 28,
  xxl: 32,
  xxxl: 40,
  xxxxl: 64,
  huge: 80
);


// Sass Map Line Heights

$line-height: (
  xs: 1.6,
  s: 1.6,
  m: 1.6,
  ml: 1.6,
  l: 1.6,
  xl: 1.4,
  xxl: 1.4,
  xxxl: 1.4,
  xxxxl: 1.4
);

@mixin bp($prop, $break1, $break2: '') {
  @if $prop == min {
    @media screen and (min-width: em($break1)) {
      @content
    }
  }
  @else if $prop == max {
    @media screen and (max-width: em(-1 + $break1)) {
      @content
    }
  }
  @else if $prop == min-max {
    @media screen and (min-width: em($break1)) and (max-width: em($break2)) {
      @content
    }
  }
}

@function font-size($key) {
  @return map-get($font-size, $key);
}

@function line-height($key) {
  @return map-get($line-height, $key);
}

@function rem($size) {
  $remSize: $size / 16;
  @return #{$remSize}rem;
}

@mixin font-size($size) {
  font-size: rem(font-size($size));
  line-height: line-height($size);
}

@mixin type-zoom($base-size, $breakpoints, $sizes) {
@include font-size($base-size);
  $i: 1;
  @each $break in $breakpoints {
    @include bp(min, $break) {
      @include font-size(nth($sizes, $i))
    }
    $i: $i + 1;
  }
}

@mixin type-xs-to-s { @include type-zoom(font-size(xs), $bp-3, font-size(s));}
.type-xs-to-s { @include type-xs-to-s; }

SassMeister-output.css

Invalid null operation: "null div 16".