SASS 创建函数来做最大和最小保证金

【问题标题】：SASS create function to do max and min on marginSASS 创建函数来做最大和最小保证金
【发布时间】：2019-04-05 12:23:15
【问题描述】：

我找不到这个问题的解决方案：我需要在 SASS 中设置一个边距，最大值介于 2 个值之间，一个是 calc()，另一个是常规 px 值。应该是这样的：

$calculation: calc(15vw + 10px);

.cssClass {
    margin-right: max($calculation, 100px);
}

关于如何创建 SCSS 函数或以某种方式使其工作的任何想法？提前谢谢！

【问题讨论】：

SASS - compare vh and px with min function的可能重复
你的问题应该在重复的帖子中回答。
抱歉，这不一样，因为我需要的是边距而不是宽度，所以我不能使用 min-margin，因为它不存在。

标签： sass

【解决方案1】：

Sass max() 函数不适用于具有不同单位的值。

也就是说，你可以使用 CSS max() 函数，用你自己的覆盖 Sass 版本：

// Override Sass function
@function max($numbers...) {
  @return m#{a}x(#{$numbers});
}

$calculation: calc(15vw + 10px);

.cssClass {
  margin-right: max($calculation, 100px);
}

...上面的 SCSS 编译成这个 CSS：

.cssClass {
  margin-right: max(calc(15vw + 10px), 100px);
}

感谢Jianqiu Xiao on GitHub 指出此解决方案。不得不创建一个自定义函数是一个不幸的 Sass 编译器怪癖，尽管它显然已经在 Dart Sass 中修复了。

【讨论】：