SASS create function to do max and min on margin

问题

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);
}

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

回答1:

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

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);
}

...the SCSS above compiles to this CSS:

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

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.

来源：https://stackoverflow.com/questions/55535307/sass-create-function-to-do-max-and-min-on-margin