Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support CSS min() and max() #2701

Closed
nex3 opened this issue Jul 25, 2018 · 9 comments
Closed

Support CSS min() and max() #2701

nex3 opened this issue Jul 25, 2018 · 9 comments
Labels
Compatibility - P3 Minorly important for compatibility with the Sass spec and ecosystem Dart Backport Done Sass 3.6
Milestone

Comments

@nex3
Copy link
Contributor

nex3 commented Jul 25, 2018

sass/sass#2378

@injms
Copy link

injms commented May 15, 2019

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?

@mgreter mgreter added this to the 3.7 milestone Jun 2, 2019
@nex3 nex3 added the Compatibility - P3 Minorly important for compatibility with the Sass spec and ecosystem label Jun 3, 2019
@brendon
Copy link

brendon commented Jun 25, 2019

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

jakubmiarka pushed a commit to alphagov/verify-self-service that referenced this issue Oct 10, 2019
The CSS compressor needs to be switched off in all the environments. This means
the deployed assets are not compressed/minifed.
This hopefully is a short-term solution until libsass gets an update - tracked sass/libsass#2701
@maxfenton
Copy link

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

@puijob
Copy link

puijob commented Mar 29, 2020

@maxfenton this worked for me:
sass/sass#2378 (comment)

@maxfenton
Copy link

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

@WangHansen
Copy link

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

@simongcc
Copy link

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.

@collimarco
Copy link

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.

yisu-kim added a commit to yisu-kim/dev-challenges that referenced this issue Aug 14, 2020
- SCSS, module을 적용해 Home.module.scss로 변경
- unquote()를 사용해 아래 오류 해결
  > SassError: Internal Error: Incompatible units: 'px' and 'vw'.
  > 참고 url: sass/libsass#2701

Resolves #45
@nex3
Copy link
Contributor Author

nex3 commented Oct 26, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Compatibility - P3 Minorly important for compatibility with the Sass spec and ecosystem Dart Backport Done Sass 3.6
Projects
None yet
Development

No branches or pull requests

9 participants