Dynamic variable for class name in sass

Question

Im creating for my project helper-class as margins, font-sizes etc and I got problem. I want to define a class name, where property in class name should be assigned as "placeholder".

Currently as you can see it generates mr-(amount) by range loop and it has huge limitation (time for compiling and range).

1. Is there any possibility to make $value variable act like placeholder?
2. If not, how can I increase compile time in gulp?

Here is link for codepen http://codepen.io/anon/pen/NAmVVj

    $break-small: 320px;
    $break-medium: 768px;
    $break-large: 1024px;
    $break-extra: 1280px;

    $baseSizes: (s: 1.5vw, m: 0.7vw, l: 5px, x: 5px);
    $fontSizes: (s: 4.7vw, m: 2.08vw, l: 16px, x: 16px);

    @mixin respond-to($media) {
      @if $media == s {
        @media (max-width: $break-medium) {
          @content;
        }
      }
      @else if $media == m {
        @media (min-width: $break-medium) and (max-width: $break-large) {
          @content;
        }
      }
      @else if $media == l {
        @media (min-width: $break-large) and (max-width: $break-extra) {
          @content;
        }
      }
      @else if $media == x {
        @media (min-width: $break-extra) {
          @content;
        }
      }
    }

    $range: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

    $properties: (m: "margin", p: "padding", b: "border");
    $directions: (t: "top", b: "bottom", l: "left", r: "right", a: "all");

    @each $value in $range {
      @each $breakpoint, $size in $baseSizes {
        @each $aliasProp, $propValue in $properties {
          @each $aliasFrom, $fromValue in $directions {

            @if $aliasFrom == a {
              .#{$aliasProp}-#{$aliasFrom}-#{$value} {
                $final: calc((#{$value} * #{$size}) * 2);

                #{$propValue}: $final;
              }
            }

            @if $aliasFrom != a {
              .#{$aliasProp}-#{$aliasFrom}-#{$value} {
                $final: calc((#{$value} * #{$size}) * 2);

                #{$propValue}-#{$fromValue}: $final;

                &-#{$breakpoint} {
                  @include respond-to($breakpoint) {
                    $final: calc((#{$value} * #{$size}) * 2);

                    #{$propValue}-#{$fromValue}: $final !important;
                  }
                }
              }
            }


          }
        }
      }
    }

Thanks for answers!

Answer 1

我通过node-sass处理我的库来解决它，因为它花费了约0.2秒，而gulp-sass则花费了约23秒，但是我仍然对第一个问题感到好奇。