Sass 无法编译 mixin 变量

Question

我最近从 templatemonster.com 购买了一个包含 SASS 源代码的模板。
我尝试使用 sass --update style.scss 编译它，但它停止并输出了这个：

Error: Invalid CSS after "...x: #{$postfix}-": expected expression (e.g. 1px, bold), was ";"
    on line 7 of custom/mixins/_indent-utilities.scss

有问题的代码是一个 mixin。
据我了解，SASS 一直在改变它处理变量的方式。
当前版本 3.4.22 返回此错误。
起初，我想可能是什么已被弃用，所以我尝试了其他一些任意版本的 SASS，但无济于事。
不幸的是，模板没有 gemfile，所以我不知道它的依赖项是什么。

这是有问题的代码：

@mixin indent-responsive($prefix, $postfix, $rules, $medias, $offsets) {
  @if ($postfix != '' and $postfix != null) {
    $postfix: #{$postfix}-;
  }

  @if ($prefix != '' and $prefix != null) {
    $prefix: #{$prefix}-;
  }

  @each $resolution, $alias in $medias {
    @if ($resolution == 0) {
      @each $offset in $offsets {
        .#{$prefix}#{$postfix}#{strip-unit($offset)} {
          @each $rule in $rules {
            #{$rule}: $offset;
          }
        }
      }
    } @else {
      @media (min-width: $resolution) {
        @each $offset in $offsets {
          .#{$prefix}#{$alias}-#{$postfix}#{strip-unit($offset)} {
            @each $rule in $rules {
              #{$rule}: $offset;
            }
          }
        }
      }
    }
  }
}

如果有人能提供任何见解，我将非常感激！

谢谢！ :)

Answer 1

看起来它没有正确处理字符串/插值。尝试改变这个：

  @if ($postfix != '' and $postfix != null) {
    $postfix: #{$postfix}-;
  }

  @if ($prefix != '' and $prefix != null) {
    $prefix: #{$prefix}-;
  }

到这里：

  @if ($postfix != '' and $postfix != null) {
    $postfix: $postfix + '-';
  }

  @if ($prefix != '' and $prefix != null) {
    $prefix: $prefix + '-';
  }