'min, max functions in sass SassError: Internal Error: Incompatible units:
I am trying to do use the functions min and max in sass. with two values of different type,
width: max(55vw, 650px);
And it gives me the error
SassError: Internal Error: Incompatible units: 'vw' and 'px'
This function works well in plain css, but doesn't work in sass. does this mean sass has limited functionalities than css or am I missing something? since comparing % and vw values with pixels is the most widely used way for functions like min and max.
How can I make this work in sass
Solution 1:[1]
You can try width: calc(max(55vw, 650px));
For reference visit closed query about the same on github node-sass issue:
Solution 2:[2]
The main problem of sass when writing some functions is the incompatibility with the min and max functions, which is solved by writing min with capital letters.
As for the incompatibility to work with data of different measures, such as px and% then the problem is quite simple just enter the number en px in this way:
(#{1200px})
These advanced function examples can clarify the syntax a bit if you have to use: Your example:
OBJETIVE (CSS):
width: max (55vw, 650px);
WORKING SASS:
width: Min ((# {55vw}), 650px);
SASS COMPILED EN CSS:
width: Max (55vw, 650px);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Imran Rafiq Rather |
| Solution 2 | Abraham |