how can i use max()/min() as css-math-functions instead of stylus-bulidin-functions

Question

such as

.some-class
  position absolute
  left max(0px, 20vh - 100px)

my intention was calling https://developer.mozilla.org/en-US/docs/Web/CSS/max

but due to http://stylus-lang.com/docs/bifs.html#mina-b, in this case, the 'left' will always be '0px'

how can i solve it?

Matti

CSS Literal, maybe? – Aksel

@ÁlvaroGonzález you are right, helpful! – Matti

Answer 1

I found this slightly hacky solution that seems to work:

max-width: "min(60vh, 580px)" % null;

Basically you're using this syntax that normally is used to apply a variable to a string, but you're replacing nothing with nothing, so it resolves to the actual rule you want.

Gudren

max-width: "min(%s)" % (60vh, 580px) – Discomfortable

Answer 2

As discussed here, the current best workaround is @css{}:

left @css{max(0px, 20vh - 100px)}

Fiertz