sass

Question

我为我的项目帮助程序类创建了边距，字体大小等，我遇到了问题。 我想定义一个类名，其中类名中的属性应该被指定为＆＃34;占位符＆＃34;。

目前您可以看到它通过范围循环生成m-r-（金额）并且具有巨大的限制（编译和范围的时间）。

1. 是否有可能让$ value变量表现得像 占位符？
2. 如果没有，我怎样才能增加gulp的编译时间？

以下是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;
                  }
                }
              }
            }


          }
        }
      }
    }

感谢您的回答！

Answer 1

我通过node-sass处理我的库来解决它，因为它需要~0.2秒而gulp-sass是~23秒，但我仍然对第1号问题感到好奇。