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

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

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

在我的情况下，我想要一个 mixin 来平方元素的大小。包括夹子。 min-width、max-width等不起作用。它将是一个矩形或一个椭圆。因为它没有保持纵横比。我想用一个动态元素size，但与min和max大小。

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

Answer 1

问题

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

解决方案

由于SASS 区分大小写，而CSS 不区分大小写MIN()，因此您可以通过调用or来强制解析器使用 CSS 版本的 min 或 max 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;
}

祝你好运！

Answer 2

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

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

Answer 3

如果您无法以任何其他方式解决它，SCSS 具有忽略引号中的内容的功能：

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

这将在没有引号的情况下编译并且是有效的 CSS。

width: max(50px, 5rem);

在您的 scss 中使用它会很奇怪，但这是允许现代 CSS 不中断您的 scss 功能的可靠方法

Answer 4

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

@mixin square-size($size, $min: $size, $max: $size) {
  $clamp-size: #{'min(max(#{$size}, #{$min}), #{$max})'};
  width: $clamp-size;
  height: $clamp-size;
}

Answer 5

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