Question

此代码抛出错误... ＆＃34; ... x之后的CSS无效：＃{$ preffix} - ＆＃34 ;:期望的表达式（例如1px，粗体）是＆＃34 ;;＆＃34;

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

@each $resolution, $alias in $medias {
  @if ($resolution == 0) {
    @each $offset in $offsets {
    .#{$preffix}#{$postfix} {
      @content;
    }
  }
} @else {
  @media (min-width: $resolution) {
    @each $offset in $offsets {
      .#{$preffix}#{$alias}-#{$postfix} {
        @content;
       }
      }
     }
    }
   }
  }

代码看起来很简单..如果$ preffix不为null，则追加＆＃34; - ＆＃34;到最后。看来 - 被视为运算符，而不是字符串。如果我用foo替换 - 没有错误。附上＆＃39; - ＆＃39;在引号中在代码中进一步创建错误＆＃34;＆＃34; .hrleft＆＃34;：预期的选择器之后的无效CSS是＆＃34;＆＃34; - ＆＃34; 0＆＃34;

我不确定为什么我不能移动＆＃34; - ＆＃34;直到下面的IF语句，就像它在＃{$ alias}

之后

.#{$preffix}-#{$postfix} {

模板编码器必须这样做，但我还没有对其进行测试，以找出原因。

这样做的正确方法是什么？

Answer 1

对整个表达式使用双引号（使用sass-3.5.1测试）：

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

RASS中的SASS Mixin错误＆＃34; ... x之后的CSS无效：＃{} - ＆＃34;：期望的表达式（例如1px，粗体），是＆＃34 ;;＆＃34;

1 个答案: