Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

// This is the default html and body font-size for the base rem value.
$rem-base: 16px;

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

@function make-rem($size) {
    $size-base: strip-units($rem-base);
    @return ($size/ $size-base) + rem;
}

// @function make-rem works here
div {
    margin-top: make-rem(40);
}

// @function make-rem doesn't work here properly
@mixin create-spacing($count: 5) {

    @for $i from 1 through $count {
        .mt-#{$i} {
            margin-top: make-rem(#{$i});
        }
        .mr-#{$i} {
            margin-right: make-rem(#{$i});
        }
        .mb-#{$i} {
            margin-bottom: make-rem(#{$i});
        }
        .ml-#{$i} {
            margin-left: make-rem(#{$i});
        }
        .pt-#{$i} {
            padding-top: make-rem(#{$i});
        }
        .pr-#{$i} {
            padding-right: make-rem(#{$i});
        }
        .pb-#{$i} {
            padding-bottom: make-rem(#{$i});
        }
        .pl-#{$i} {
            padding-left: make-rem(#{$i});
        }        
    }
}

@include create-spacing();

SassMeister-output.css

div {
  margin-top: 2.5rem; }

.mt-1 {
  margin-top: 1/16rem; }

.mr-1 {
  margin-right: 1/16rem; }

.mb-1 {
  margin-bottom: 1/16rem; }

.ml-1 {
  margin-left: 1/16rem; }

.pt-1 {
  padding-top: 1/16rem; }

.pr-1 {
  padding-right: 1/16rem; }

.pb-1 {
  padding-bottom: 1/16rem; }

.pl-1 {
  padding-left: 1/16rem; }

.mt-2 {
  margin-top: 2/16rem; }

.mr-2 {
  margin-right: 2/16rem; }

.mb-2 {
  margin-bottom: 2/16rem; }

.ml-2 {
  margin-left: 2/16rem; }

.pt-2 {
  padding-top: 2/16rem; }

.pr-2 {
  padding-right: 2/16rem; }

.pb-2 {
  padding-bottom: 2/16rem; }

.pl-2 {
  padding-left: 2/16rem; }

.mt-3 {
  margin-top: 3/16rem; }

.mr-3 {
  margin-right: 3/16rem; }

.mb-3 {
  margin-bottom: 3/16rem; }

.ml-3 {
  margin-left: 3/16rem; }

.pt-3 {
  padding-top: 3/16rem; }

.pr-3 {
  padding-right: 3/16rem; }

.pb-3 {
  padding-bottom: 3/16rem; }

.pl-3 {
  padding-left: 3/16rem; }

.mt-4 {
  margin-top: 4/16rem; }

.mr-4 {
  margin-right: 4/16rem; }

.mb-4 {
  margin-bottom: 4/16rem; }

.ml-4 {
  margin-left: 4/16rem; }

.pt-4 {
  padding-top: 4/16rem; }

.pr-4 {
  padding-right: 4/16rem; }

.pb-4 {
  padding-bottom: 4/16rem; }

.pl-4 {
  padding-left: 4/16rem; }

.mt-5 {
  margin-top: 5/16rem; }

.mr-5 {
  margin-right: 5/16rem; }

.mb-5 {
  margin-bottom: 5/16rem; }

.ml-5 {
  margin-left: 5/16rem; }

.pt-5 {
  padding-top: 5/16rem; }

.pr-5 {
  padding-right: 5/16rem; }

.pb-5 {
  padding-bottom: 5/16rem; }

.pl-5 {
  padding-left: 5/16rem; }