Sass 使用SCSS动态调整字体大小

是否可以仅使用SCS而不使用JS来设置相对于其他元素字体大小的字体大小

例如，我希望得到比输入小2像素的段落文本

我尝试过类似的方法，但似乎不起作用：

HTML

---

也许使用函数

SCSS

然后您可以使用：

SCSS

---

我们还可以依赖浏览器计算功能，如下所示：

---

$psize:$isizev-2px；？谢谢我已经在JSfiddle.net上试过了，但似乎不起作用。或者JSFIDLE的SCSS呈现被破坏了。。。还有其他地方可以在线测试吗？有。你也有一个输入错误，$isisev而不是$isizet。这看起来很有趣，但不幸的是，我已经为px中的输入设置了字体大小…嗯，请看一下[链接]，我假设只使用了px单元。嗯，我更喜欢这个想法！用于什么？它允许在calc函数的属性值中使用变量值。如示例所示，这就是所谓的插值。没有它，就无法解析变量。

<input type="text" value="This is input text">
<p>Text smaller then input</p>

$isize: 16px;
$psize: $isizev - 2;

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}

@function ratioDimensions($factor:1, $base-dimension:16, $unit:px) {
  $calcSize: $base-dimension * $factor;
  @return #{$calcSize}#{$unit};
}

$isize: ratioDimensions(1);
$psize: ratioDimensions(1,16-2,px);

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}

$isize: 16px;
$psize: calc(#{$isize} - 2px);

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}