SCSS mixin 第二个参数未正确编译

Question

我正在查看 mixin documentation 并创建了一个简单的 mixin

@mixin mobile-pos($property, $offset) {
    // Fallback
    #{$property}: calc(100vh - $offset);

    // Better - for browsers that support custom css vars
    #{$property}: calc(var(--rvh) * 100 - $offset);
}

这是我使用 mixin 的方式

#container-circles {
    bottom: unset;
    @include mobile-pos(top, 90px);
}

我检查了编译后的 CSS 输出

#container-circles {
  bottom: unset;
  top: calc(100vh - $offset);
  top: calc(var(--rvh) * 100 - $offset); }

知道为什么第二个参数没有正确编译吗？我正在使用 node-sass 4.11.0

Answer 1

在calc() 中使用$variables 是这样的

SCSS

    @mixin mobile-pos($property, $offset) {
      // Fallback
      #{$property}: calc(100vh - #{$offset});

      // Better - for browsers that support custom css vars
      #{$property}: calc(var(--rvh) * 100 - #{$offset});
    }