代码之家 › 专栏 › 技术社区 › quickshiftin

SCSS混入不正确编译

sass css

quickshiftin · 技术社区 · 7 年前

我正试着根据视窗调整一些文字的大小,发现 this thread .

我正在尝试使用类似于 this answer

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

所以我提出了这个方案

/* 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 是的。

1 回复 | 直到 7 年前

Pytth 7 年前

你的语法有点不对劲。与…联机 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); } }

编辑:

这里有一个指向 codepen 和SCSS一起要查看编译的代码,请单击css面板右上角的胡萝卜和“查看编译的css”。