Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» Libsass (ΡΠ΅ΡΠ΅Π· SassC Rails) Π² ΠΏΡΠΎΠ΅ΠΊΡ, ΠΈ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΡΠΈΠ»ΠΎ ΠΏΡΠΎΡΠ΅ΡΡ π
ΠΠ΄Π½Π°ΠΊΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΈΠ·-Π·Π° ΠΎΡΡΡΡΡΡΠ²ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ CSS min()
ΠΈ max()
π’ - Π΅ΡΡΡ Π»ΠΈ ΠΈΠ΄Π΅ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ?
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Ρ ΠΎΡΠ΅Π» Π±Ρ, ΡΡΠΎΠ±Ρ ΡΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π»ΠΎΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ruby Sass ΡΠ΅ΠΏΠ΅ΡΡ EOL.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΡΡΠΎΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
html {
font-size: min(max(16px, 4vw), 22px);
}
Π΄Π°Π΅Ρ SassError: Internal Error: Incompatible units: 'px' and 'vw'.
@maxfenton, ΡΡΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ:
https://github.com/sass/sass/issues/2378#issuecomment -433868712
Π― ΡΠ΅ΡΠΈΠ» ΡΠ²ΠΎΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Sass unquote()
ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΎΡΠ²Π΅ΠΆΠΈΡΡ Π΅Π³ΠΎ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ²Π΅ΡΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Sass Ρ
ΠΎΡΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ. Ρ
ΠΎ
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ width: unquote("min(500px, 90%)");
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ
width: unquote("min(500px, 90%)");
ΠΠ½ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Ρ Π·Π°ΡΡΡΡΠ» Ρ min(10vw + 10%, 100px);
ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΈΠ½ΡΠ΅ΡΠΏΠΎΠ»ΡΡΠΈΠ΅ΠΉ.
$test: 20vw;
width: unquote("max(#{$test} + 10%, 100px)");
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, ΡΡΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΠ»ΡΡ.
Π’Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ±ΠΈΠ²Π°Π΅Ρ Ρ ΡΠΎΠ»ΠΊΡ ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ. Π― Π½Π΅ ΠΌΠΎΠ³ ΠΏΠΎΠ½ΡΡΡ, ΠΏΠΎΡΠ΅ΠΌΡ Ρ ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΎΡΠΈΠ±ΠΊΠ° Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ΅ΡΠ²Π΅ΡΠ°, ΠΊΠΎΠ³Π΄Π° Ρ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΊΠΎΠ΄ CSS ... ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π»Π°ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ min
ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°Π»ΠΎΡΡ ΠΊΠ°ΠΊ ΡΡΠ½ΠΊΡΠΈΡ SASS.
ΠΠ°ΠΊΡΡΡΠΈΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ LibSass ΡΡΡΠ°ΡΠ΅Π», ΠΈ ΠΌΡ Π½Π΅ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊ Π½Π΅ΠΌΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ
width: unquote("min(500px, 90%)");