Libsass: Support CSS min() and max()

Created on 25 Jul 2018  ·  9Comments  ·  Source: sass/libsass

Compatibility - P3 Dart Backport Done Sass 3.6

Most helpful comment

To elaborate on @maxfenton's solution, here is an example: width: unquote("min(500px, 90%)");

All 9 comments

I've added Libsass (via SassC Rails) on a project and it's really sped things up 🚀

However, another project can't use it because of the lack of CSS min() and max() support 😢 - is there any idea when this would be supported?

Definitely keen to see this supported since Ruby Sass is now EOL.

Additional test case:
html { font-size: min(max(16px, 4vw), 22px); }
yields SassError: Internal Error: Incompatible units: 'px' and 'vw'.

@maxfenton this worked for me:
https://github.com/sass/sass/issues/2378#issuecomment-433868712

I solved my issues by using Sass unquote() and recommend brushing up on that if you need to output CSS functions that Sass wants to interpret. xo

To elaborate on @maxfenton's solution, here is an example: width: unquote("min(500px, 90%)");

To elaborate on @maxfenton's solution, here is an example: width: unquote("min(500px, 90%)");

It works perfectly when I got stuck with min(10vw + 10%, 100px);
it also works perfectly with interpolation.

$test: 20vw;
width: unquote("max(#{$test} + 10%, 100px)");

Thanks for sharing.

This behavior is really confusing and should be fixed. I couldn't figure out why I had a server-side error while I was simply using some CSS code... The problem was that min was interpreted as a SASS function.

Closing this out because LibSass is now deprecated and we aren't expecting to add any additional features to it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

xzyfer picture xzyfer  ·  11Comments

xzyfer picture xzyfer  ·  9Comments

catamphetamine picture catamphetamine  ·  7Comments

sgbeal picture sgbeal  ·  13Comments

c0d3xpl0it picture c0d3xpl0it  ·  4Comments