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

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

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

Answer 2

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

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

这将在不带引号的情况下进行编译，并且是有效的 CSS。

width: max(50px, 5rem);

在你的 scss 中使用它会很奇怪，但这是确保现代 CSS 不会中断你的 scss 功能的可靠方式

Answer 3

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

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

Answer 4

问题

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

解决方案

由于 SASS 区分大小写而 CSS 不区分，您可以通过调用 MIN() 或 @ 来强制解析器使用最小或最大的 CSS 版本987654326@ 代替。如果您需要在 MAX() 内恢复 SASS 解析（喜欢引用 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 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);
} 

Answer 6

在sass中做min或max时，如果遇到不兼容的单位错误，你可以简单地将值放在引号中，它会让它通过。

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

这也适用于其他功能。

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

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

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

#{} 将它们转换为字符串，这样 sass 就不会在编译时使用它们进行算术运算

Answer 7

为此，而不是 SCSS @include

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

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

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