使用 SCSS 动态调整字体大小

Question

是否可以仅使用 SCSS 而不是 JS 来设置相对于另一个元素的字体大小的字体大小？

例如，我想让段落文本比输入小 2 个像素。

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

HTML

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

SCSS

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

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}

Answer 1

也许使用函数？

SCSS

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

然后你可以使用：

SCSS

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

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}

Answer 2

我们也可以依赖浏览器的 calc() 函数：https://caniuse.com/#search=calc()

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

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}

Dynamic font sizing with SCSS