SASS: несовместимые единицы: vw и px
Как решить проблему несовместимых модулей?
@mixin square-size($size, $min: $size, $max: $size) {
$clamp-size: min(max($size, $min), $max);
width: $clamp-size;
height: $clamp-size;
}
Вход:
@include square-size(10vw, 40px, 70px);
Проблема:
Incompatible units: 'vw' and 'px'.
node_modules\@ionic\app-scripts\dist\util\helpers.js:253.replace(/&/g, '&')
Но если я использую calc(1vw - 1px), он работает. (нет проблем с агрегатом).
например max(calc(1vw - 1px)) не работает. Поскольку no number for max.
В моем случае я хочу, чтобы миксин был квадратным по размеру элемента. Включая зажим.
min-width, max-width и др. Не работают. Это будет прямоугольник или эллипс. Потому что не сохраняет соотношение сторон.
Мне нужен элемент с динамическим size, но с размером min и max.
Я понимаю, что динамический блок vw (Viewport) должен присутствовать после компиляции sass. Следовательно, невозможно преобразовать значение в фиксированную единицу.
Но разве нет выхода?
Ответы 7
Вы можете сделать это так, используя min-width / height и max-width / height, чтобы избежать смешивания единиц:
@mixin square-size($size, $min: $size, $max: $size) {
min-width: $min;
max-width: $max;
min-height: $min;
max-height: $max;
width: $size;
height: $size;
}
.class {
@include square-size(10vw, 40px, 70px);
}
Спасибо за ответ. Но это как раз моя текущая реализация. Но, как я уже писал выше, в некоторых случаях это будет прямоугольник или эллипс. Потому что min-width и min-height, max-width и max-height не поддерживают соотношение сторон. Извините, если эта информация не ясна в описании выше. Спасибо, в любом случае. :)
Вы пробовали его запустить? Он всегда будет давать квадраты - попробуйте еще раз взглянуть :) Вот пример пера: codepen.io/jakob-e/pen/REBzKw
Вам нужно будет обойти компилятор scss и вместо этого использовать литерал.
@mixin square-size($size, $min: $size, $max: $size) {
$clamp-size: #{'min(max(#{$size}, #{$min}), #{$max})'};
width: $clamp-size;
height: $clamp-size;
}
Это правильное решение, однако я пропустил его в первый раз, потому что я не мог видеть, где соответствующие изменения.
Для этого вместо SCSS @include
.foo {
@include square-size(10vw, 40px, 70px);
}
используйте лучшую функцию css "зажим":
.foo {
width:clamp(10vw, 40px, 70px);
height:clamp(10vw, 40px, 70px);
}
Проблема в том, что если вы использовали SCSS для всего проекта, SCSS не будет компилировать clip (), min () или max () из-за ошибки, указанной выше.
Это чистый CSS. Работает отлично. SCSS не выдает ошибку. Зря поставили мне минус.
То, что вы написали, является чистым css, но OP спрашивает о SCSS - ваш код должен быть встроенным или отдельным .css
Я использую этот код CSS в своем SCSS, и он отлично работает, с компилятором проблем нет. Человек думает, что в SCSS есть решение, а поверхностное решение в CSS - это проще, лучше, элегантнее!
Мой scss выдает ошибку, потому что CLAMP - это функция scss, которая запрашивает меньше / больше параметров, чем 3 в css - если вы используете старый scss, есть много функций, которые теперь неактуальны для современного css, но не работают, потому что они интерпретировать их как функции. Обновление SCSS может иногда приводить к сбою проекта, поэтому функция unquote () - это способ обернуть зажим css в scss без необходимости иметь дело с дьяволом. :)
Мне удалось исправить ошибку в React SASS с помощью функции calc.
font-size: calc(max(8vw, 30px));
Если вы не можете обойти это каким-либо другим способом, в SCSS есть функция для игнорирования вещей в кавычках:
width: unquote("max(50px, 5rem)");
Он будет скомпилирован без кавычек и будет действительным CSS.
width: max(50px, 5rem);
Было бы странно иметь это в вашем scss, но это верный способ позволить современному CSS не прерывать ваши scss-функции.
при выполнении min или max в sass, если вы получаете ошибку несовместимых единиц, вы можете просто поместить значение в цитату, и она пропустит.
min(10vw, 20px) в "min(10vw, 20px)"
Это работает и для других функций.
И если вы используете переменные в вычислениях, вы используете #{} для переменных, чтобы они прошли.
$a: 10px;
$b: 25%;
.mydiv {
width: calc(#{$a} - #{$b});
}
И #{} преобразует их в строку, чтобы sass не производил арифметические операции, используя их при компиляции.
Проблема
В CSS не было собственных функций времени выполнения min() и max(), а до того, как они появились, у SASS была версия для времени компиляции. Поскольку SASS не работает в реальном времени, было бы невозможно определить, больше ли 10vw или 40px - отсюда и ошибка.
Решение
Поскольку SASS чувствителен к регистру, а CSS не, вы можете заставить парсер использовать версию CSS min или max, просто вызвав вместо этого MIN() или MAX(). Если вам нужно возобновить синтаксический анализ SASS внутри MAX() (как ссылаться на переменную SASS), просто заключите код SASS в #{...}.
.
Вот фиксированная версия вашего кода для демонстрации:
@mixin square-size($size, $min: $size, $max: $size) {
/* $clamp-size: min(max($size, $min), $max); */
$clamp-size: MIN(MAX(#{$size}, #{$min}), #{$max});
width: $clamp-size;
height: $clamp-size;
}
Удачи!
Поскольку Sass компилируется на сервере, а не в браузере - единицы измерения
vw(и другие относительные) не могут быть преобразованы во что-либо, вы можете выполнять математические вычисления с помощью.calc()рассчитывается браузером, а не Sass. Из-за этого вам нужно либо получить абсолютные значения для выполнения вычислений с помощью Sass, либо преобразовать ваши уравнения в выраженияcalc(), которые будут вычисляться в браузере.