css - scss mixin 未正确编译

Question

我正在尝试相对于视口(viewport)调整一些文本的大小，并发现 this thread .

我现在正在尝试使用类似于this answer的东西。

font-size: calc(3vw + 3vh);

所以我想出了这个scss

/* Font sizing based on size of the viewport */
@mixin vp-font-size($multiplier: 1) {
  font-size: calc((1vw + 1vh) * $multiplier);
}
.vp-font-size {
  p {
    @include vp-font-size(.8);
  }
  .h6 {
    @include vp-font-size(.9);
  }
  .h5 {
    @include vp-font-size(1.0);
  }
  .h4 {
    @include vp-font-size(1.1);
  }
  .h3 {
    @include vp-font-size(1.2);
  }
  .h2 {
    @include vp-font-size(1.3);
  }
  .h1 {
    @include vp-font-size(1.4);
  }
}

但是，它正在编译为这个

.vp-font-size p {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h6 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h5 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h4 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h3 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h2 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h1 {
  font-size: calc((1vw + 1vh) * $multiplier); }

当我输入类似 font-size: calc((1vw + 1vh) * 1.1) 的内容时，我的浏览器可以理解它。那么我使用的 scss 解析器有问题吗？

我正在阅读scss documentation这似乎是有效的。我正在使用node-sass .

Answer 1

你的语法有点不对劲。在 calc 线上，$multiplier 应该是 #{$multiplier}

@mixin vp-font-size($multiplier: 1) { 字体大小: calc((1vw + 1vh) * #{$multiplier}); } .vp-字体大小 { p { @include vp-font-size(.8); } .h6 { @include vp-font-size(.9); } .h5 { @include vp-font-size(1.0); } .h4 { @include vp-font-size(1.1); } .h3 { @include vp-font-size(1.2); } .h2 { @include vp-font-size(1.3); } .h1 { @include vp-font-size(1.4); } }

编辑:

这里是 codepen 的链接与 SCSS。要查看编​​译后的代码，请单击 CSS 面板右上角的胡萝卜和“查看编译后的 CSS”。