Question

如何解决单元不兼容的问题？

@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, '&amp;')

但是，如果我使用calc(1vw - 1px)，它可以工作。（无单位问题）。例如max(calc(1vw - 1px))不起作用。因为no number for max。

在我的情况下，我希望mixin使元素的大小平方。包括夹钳。 min-width，max-width等不起作用。这将是矩形或椭圆形。因为它不保持纵横比。我想要一个动态size但尺寸为min和max的元素。

我了解在sass编译后必须存在动态单元vw（视口）。因此，无法将值转换为固定单位。但是没有办法吗？

Answer 1

您需要绕过scss编译器并改用文字。

(s, 0)

Answer 2

如果您无法以其他任何方式解决该问题，则SCSS可以忽略引号中的内容：

width: unquote("max(50px, 5rem)");

它将被编译为不带引号并且是有效的CSS。

width: max(50px, 5rem);

将它包含在您的scss中会很奇怪，但这是一种确保现代CSS不会中断您的scss函数的肯定方法

Answer 3

我能够使用calc函数修复React SASS中的错误。

font-size: calc(max(8vw, 30px));

Answer 4

您可以使用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);
}

Answer 5

在 sass 中执行 min 或 max 时，如果出现单位不兼容的错误，您可以简单地将该值放在引号中，它就会让它通过。

min(10vw, 20px) 到"min(10vw, 20px)"

这也适用于其他功能。

如果您在计算中使用变量，则在变量上使用 #{} 以使其通过

$a: 10px;
$b: 25%;

.mydiv {
  width: calc(#{$a} - #{$b});
}

并且 #{} 将它们转换为字符串，以便 sass 在编译时不会使用它们进行算术

Answer 6

问题

CSS 过去没有自己的运行时 min() 和 max() 函数，在它们存在之前，SASS 有一个编译时版本。由于 SASS 没有实时运行，因此它无法确定 10vw 或 40px 是否更大 - 因此出现错误。

解决方案

由于 SASS 区分大小写而 CSS 不区分，您可以通过调用 MIN() 强制解析器使用 min 或 max 的 CSS 版本或 MAX() 代替。如果您需要在 MAX() 内部恢复 SASS 解析（喜欢引用 SASS 变量），只需用 #{...} 包围 SASS 代码。

< /p>

这是您的代码的固定版本，用于演示：

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

祝你好运！

Answer 7

为此，而不是SCSS @include

.foo {
  @include square-size(10vw, 40px, 70px);
}

使用更好的CSS函数“ clamp”：

.foo {
    width:clamp(10vw, 40px, 70px);
    height:clamp(10vw, 40px, 70px);
}

SASS：不兼容的单位：“ vw”和“ px”

7 个答案:

问题

解决方案