Ошибка реагирования единиц измерения: невозможно вычислить vw и px в функции css cal c ()

Question

Я хочу сделать размер шрифта плавным, используя css cal c () в React, но он продолжает выдавать ошибку, когда я смешиваю единицы vw и px.

font-size: calc(14px + (26px - 14px)) * ((100vw - 300px) / (1600 - 300));

Получил ошибку и SASS не может скомпилировать 100vw - 300px.

Как лучше всего это исправить?

Answer 1

В CSS calc операторы умножения или деления должны иметь число без единицы в качестве одного из операндов.

В документах MDN сказано:

* Умножение. По крайней мере один из аргументов должен быть <number>.

/ Division. Правая часть должна быть <number>.

Ваше умножение нарушает это правило. Упрощенно это так:

calc(26px * (100vw - 300px) / 1300);

Это недопустимо, потому что ни 26px, ни (100vw - 300px) не являются единичными числами.

---

У вас также есть дополнительные закрывающие скобки после 14px), которые делает это синтаксической ошибкой, как вы написали в своем вопросе.

Answer 2

Что ж, было бы полезно, если бы вы сказали нам, в чем заключается ошибка, но вы можете попробовать:

("100vw - 300px")

Подробнее здесь Можно ли использовать vh минус пиксели в CSS кал? c ()