scss mixin在haml文件中不起作用

Question

我试图在haml文件中编写scss。我创建了一个名为render的mixin，它在一个实际的scss文件中完美地工作但是给出了像 -

这样的错误

这是实际的代码 - （它在component.haml文件中）

:scss
    @mixin render($property, $value)
    {
      -webkit-#{$property}: $value;
      -moz-#{$property}: $value;
      -o-#{$property}: $value;
      -ms-#{$property}: $value;
      #{$property}: $value;
    }

    h2
    {
        @include render(transition, all 0.2s ease);
    }

您也可以在http://codepen.io/Kingstheory/pen/gEwDl找到代码。我无法弄清楚它有什么问题。它在scss文件中运行良好。

Answer 1

Haml将过滤器主体中出现的所有#{...}解释为需要Ruby插值，并在文本传递给SCSS之前将它们处理。由于没有$property全局定义，因此它们都评估为nil，因此在插值后显示为空字符串。所以Sass实际看到的文字就像是：

@mixin render($property, $value)
{
  -webkit-: $value;
  -moz-: $value;
  -o-: $value;
  -ms-: $value;
  : $value;
}

mixin的最后一行: $value;是无效的SCSS，是造成错误的原因。

为了将#{..}保持不变为Sass，您需要使用#转义\字符：

:scss
  @mixin render($property, $value)
  {
    -webkit-\#{$property}: $value;
    -moz-\#{$property}: $value;
    -o-\#{$property}: $value;
    -ms-\#{$property}: $value;
    \#{$property}: $value;
  }

  h2
  {
    @include render(transition, all 0.2s ease);
  }