Question

我正在尝试相对于视口调整一些文本的大小，并发现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) { 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); } }

编辑：

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

scss mixin无法正确编译

1 个答案: