Функция Less и SCSS calc
Я обычно использую SCSS, так как это тренд и тот, который я предпочитаю. Я использовал Меньше для сравнения обоих. Я обнаружил, что при использовании Less происходит что-то действительно странное.
Когда я использую функцию вычисление с SCSS, например, как height: calc(100vh - 64px), она преобразует 100vh в px, затем вычитает два числа и преобразует их обратно в блок vh, что и нужно.
С другой стороны, делая то же самое, но с Less, он немедленно преобразует число после знака минус в ту же единицу, что и предыдущий, а затем вычитает число, что очень странно. Поскольку в предыдущем примере вычисленная высота; используя меньше; будет 36vh, то есть calc(100vh - 64vh), что не так.
Кто-нибудь знает, как решить эту проблему при использовании Less?
@ seven-phase-max Моя трассировка к calc привела меня к этому моменту. Если нет, то как рассчитывается? Я хотел бы знать, если я ошибаюсь
@ seven-phase-max OP просто сбит с толку из-за разницы между тем, что делает SCSS, и тем, что делает браузер.
@ seven-phase-max Я искал аналогичный ответ на вопрос, но не нашел. Большое спасибо за ссылку (Y).
Ответы 1
У меня была такая же проблема, когда я перешел с SASS на Less. Вам нужно окружить ваш calc() цитатами и ~ перед ним. Тогда он правильно рассчитает. Это то, что называется Меньше языкового бегства.
Меньше:
.test-div {
width: ~"calc(100vh + 60vh)";
}
Большое спасибо. Но у меня другой вопрос, это ошибка или так используется LESS?
Это не ошибка, это сделано намеренно. Он называется Меньше языкового бегства.
Less v3 вообще не касается операторов
calc. Это функция браузера, которую автономные компиляторы просто не могут оценить, поскольку используемые там значения могут быть неизвестны во время компиляции. Например. «SCSS преобразует 100vh в px» - как SCSS может узнать, что будет1vhв пикселях перед, если вы даже примените скомпилированный CSS к любой странице (т.е. высота области просмотра в основном неизвестна)? Если вы используете Less v2 или ниже, см. stackoverflow.com/questions/11972084/….