Динамическое изменение размера шрифта с помощью 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

Мы также можем положиться на функцию браузера calc () согласно: https://caniuse.com/#search=calc()

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

input {
  font-size: $isize;
}

p {
  font-size: $psize;
}

Answer 2

Может быть, с помощью функции?

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;
}