title: Dynamic variable for class name in sass
body: <p>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". </p>
  
  <p>Currently as you can see it generates m-r-(amount) by range loop and it has huge limitation (time for compiling and range). </p>
  
  <ol>
  <li>Is there any possibility to make $value variable act like
  placeholder?</li>
  <li>If not, how can I increase compile time in gulp?</li>
  </ol>
  
  <p>Here is link for codepen <a href="http://codepen.io/anon/pen/NAmVVj" rel="nofollow">http://codepen.io/anon/pen/NAmVVj</a></p>
  
  <pre><code>    $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;
  
                  &amp;-#{$breakpoint} {
                    @include respond-to($breakpoint) {
                      $final: calc((#{$value} * #{$size}) * 2);
  
                      #{$propValue}-#{$fromValue}: $final !important;
                    }
                  }
                }
              }
  
  
            }
          }
        }
      }
  </code></pre>
  
  <p>Thanks for answers!</p>