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

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

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});
    }

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

1 个答案: