search

ritwickdey / vscode-live-sass-compiler

Compile Sass or Scss file to CSS at realtime with live browser reload feature.
https://ritwickdey.github.io/vscode-live-sass-compiler/
MIT License
657 stars 168 forks source link

css min(), max() function does not working! #461

Open abhijitbcob opened 3 years ago

abhijitbcob commented 3 years ago

width: min(500px, 70%);

this line shows error like:

Compilation Error Internal Error: Incompatible units: '%' and 'px'.

glenn2223 commented 3 years ago

FYI: not fully researched - guessing based on experience - so may not be 100% accurate

When this version was released, CSS did not have support for min/max. It was purely a SASS feature/function that required the same types of digits (responsive design wasn't really a thing). Obviously, since then, CSS has standardised it and allowed different units (as these can be compiled/rendered by the browser). SASS updated to acknowledged this change and, rather than erroring on different units, it acknowledges this new CSS standard and honours it. So when it can figure it out it changes it else if leaves it alone (i.e. max(20px, 100px) => 100px, max(2px, 10%) => max(2px, 10%) ).

This version of live-sass is not maintained so I'd suggest updating to my own. It uses a very recent release of SASS, obviously supporting this new CSS standard.

You can find it at https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass