css - sass中类名的动态变量

Question

我在为我的元素助手类创建边距、字体大小等时遇到了问题。我想定义一个类名，其中类名中的属性应指定为“占位符”。

目前如您所见，它通过范围循环生成 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 感到好奇。