具有 px 和百分比单位的 SCSS min()答案

【问题标题】：SCSS min() with both px and percentage units具有 px 和百分比单位的 SCSS min()
【发布时间】：2021-03-24 01:22:30
【问题描述】：

我正在编写一个小型 Rails 应用程序，我需要像这样使用 min() 函数：

img {
    width: min(75%, 250px);
}

在 Firefox 中，通过 CSS 检查器，我可以设置它，它就可以工作。但是在 SCSS 中，我得到一个编译错误：

Internal Error: Incompatible units: 'px' and '%'.

如果我使用像 min(250px, 350px) 这样的硬编码 px 单位，它可以工作，但使用 min() 根本没有意义，我可以改用 250px，这不是我想要的。

是否可以将min() 与px 和% 单元一起使用？

【问题讨论】：

在VS Code 中使用Dart SASS 编译以纠正CSS img { width: min(75%, 250px); }。您使用什么 SASS 编译器和/或 SASS 版本？也许有人可以检查？（注意：最实际的 Sass 版本是“Dart Sass”）

标签： sass

【解决方案1】：

好的，所以问题是 CSS 和 SCSS 都具有相同的 min() 函数，并且发生了冲突。但 SCSS 实际上是区分大小写的，而 CSS 不区分大小写，所以我可以改写 Min() 或 MIN()。那工作得很好。不过，我认为这不仅仅是一种黑客行为。

【讨论】：

【解决方案2】：

你必须使用calc()，因为这会让浏览器计算百分比是多少像素。

img {
  width: min(calc(75%), 250px);
}

【讨论】：