CSS min() and max() re-introduced

(edited by @nex3)

• Proposal
• Specs
• Documentation
• Dart Sass
• LibSass
• Ruby Sass

---

https://drafts.csswg.org/css-values/#calc-notation A (maybe) quick solution could be to add a @ prefix – and while at it extend the math methods to cover pow, sqrt, cos, etc…

 @min($numbers...)
 @max($numbers...)
 @abs($number)
 @percentage($number)
 @round($number)
 @ceil($number)
 @floor($number)
 @random($limit)
 //  Sadly missing from Sass at this point 
 @pow($base, $exponent)
 @sqrt($number)
 @cos($number)
 ... 
  

[jrjacobs24]

I ran into this issue today as well when converting my src from Less to Scss. I found that using Sass Function unquote rendered the correct output I was looking for.

In my Scss:

.example {
  right: unquote('max(#{$global-margin}, env(safe-area-inset-right))');
}

In my CSS:

.example {
  right: max(15px, env(safe-area-inset-right));
}

I went this method instead of using calc(max(...)) or m#{a}x(...) routes because the first one made the resulting code look messy, and the second one just felt too hacky. Anyways, hope this helps someone.

[swordray]

Define CSS max() and min() functions.

@function max($numbers...)
  @return m#{a}x(#{$numbers})

@function min($numbers...)
  @return m#{i}n(#{$numbers})

These will keep your own code clean.

.example
  right: max(15px, env(safe-area-inset-right))