SASS:不兼容的单位:"vw"和"px" [英] SASS: Incompatible units: 'vw' and 'px'

问题描述

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

How to solve the incompatible units problem?

@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.

But if I use calc(1vw - 1px) it works. (no unit problem). e.g. max(calc(1vw - 1px)) does not work. Because no number for max.

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

In my case I want a mixin to square the size of an element. Including clamp. min-width, max-width, etc. does not work. It will be a rect or an ellipse. Because it does not keep the aspect ratio. I want a element with dynamic size but with min and max size.

我知道在sass编译之后必须存在动态单元vw(视口).因此，无法将值转换为固定单位. 但是没有办法吗?

I understand that the dynamic unit vw (Viewport) must be present after sass compilation. Therefore it is not possible to convert the value to a fixed unit. But is there no way?

推荐答案

您需要绕过scss编译器&改用文字.

You would need to bypass the scss compiler & use a literal instead.

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

这篇关于SASS:不兼容的单位:"vw"和"px"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！