我正在尝试相对于视口调整一些文本的大小，并找到了这个线程。
我现在正在尝试使用类似于这个答案的东西
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的文档，它似乎是有效的。我使用节点sass。
您的语法有点错误。在带有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的代码笔。要查看编译后的代码，请单击CSS面板右上角的胡萝卜，然后单击"查看已编译的CSS"。