sass中类名的动态变量

Question

我正在为我的项目助手类创建空白，字体大小等，我遇到了问题.我想要定义一个类名，其中类名中的属性应该被分配为“占位符”。

目前，如您所见，它通过范围循环生成m(量)，并且它有很大的限制(编译和范围的时间)。

1. 是否有可能使$value变量充当占位符？
2. 如果没有，我怎样才能增加编译时间呢？

下面是代码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;
                  }
                }
              }
            }


          }
        }
      }
    }

谢谢你的回答！

Answer 1

我通过节点sass处理我的库来解决这个问题，因为它需要0.2s，而gulp是23秒，但是我仍然对no1问题很好奇。