Я хотел бы создать функцию scss для вычисления размера корневого шрифта в зависимости от ширины области просмотра.
Этот
html {
font-size: calc(14px + 30 * ((100vw - 320px) / 680));
}
возвращает font-size: 14px; нужного мне размера. Но функция, которую я пишу:
@function root-font-size-function($viewport) {
// $viewport: 1px * $viewport;
$size: calc(14px + 30 * (($viewport - 320px) / 680));
@return $size;
}
:root {
font-size: root-font-size-function(100vw);
}
возвращает ошибку:
Как я могу правильно написать эту sass-функцию?
Спасибо, это работает






Благодаря @Vivick это работает при интерполяции переменной $viewport следующим образом:
@function root-font-size-function($viewport) {
$size: calc(14px + 30 * ((#{$viewport} - 320px) / 680));
@return $size;
}
:root {
font-size: root-font-size-function("100vw");
}
Вам необходимо интерполировать эти переменные в
calc:calc(#{$viewport})