SASS 创建函数来做最大和最小保证金 [英] SASS create function to do max and min on margin

问题描述

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

I couldn't find a solution for this problem: I need to set a margin in SASS with a max between 2 values, one is a calc() and the other is a regular px value. It would be something like this:

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

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

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

Any ideas on how to create a SCSS function or some way to make this work? Thank you in advance!

推荐答案

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

The Sass max() function doesn't work with values that have different units.

也就是说，您可以使用 CSS max() 用你自己的覆盖 Sass 版本来实现:

That said, you can use the CSS max() function by overriding the Sass version with your own:

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

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

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

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

...the SCSS above compiles to this CSS:

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

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

Credit to Jianqiu Xiao on GitHub for pointing out this solution. Having to create a custom function is an unfortunate Sass compiler quirk, though it has apparently been fixed in Dart Sass already.

这篇关于SASS 创建函数来做最大和最小保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！