рдореИрдВрдиреЗ рдПрдХ рдкрд░рд┐рдпреЛрдЬрдирд╛ рдкрд░ рд▓рд┐рдмрд╕рд╛рд╕ (рдПрд╕рдПрдПрд╕рдПрд╕рд╕реА рд░реЗрд▓ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ) рдЬреЛрдбрд╝рд╛ рд╣реИ рдФрд░ рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЪреАрдЬреЛрдВ рдХреЛ рдмрдврд╝рд╛ рджреЗрддрд╛ рд╣реИ
рд╣рд╛рд▓рд╛рдВрдХрд┐, рд╕реАрдПрд╕рдПрд╕ min()
рдФрд░ max()
рд╕рдорд░реНрдерди рдХреА рдХрдореА рдХреЗ рдХрд╛рд░рдг рдХреЛрдИ рдЕрдиреНрдп рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рд╣реИ - рдХреНрдпрд╛ рдХреЛрдИ рд╡рд┐рдЪрд╛рд░ рд╣реИ рдХрд┐ рдпрд╣ рдХрдм рд╕рдорд░реНрдерд┐рдд рд╣реЛрдЧрд╛?
рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдпрд╣ рд╕рдорд░реНрдерд┐рдд рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдЙрддреНрд╕реБрдХ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рд░реВрдмреА рд╕реИрд╕ рдЕрдм рдИрдУрдПрд▓ рд╣реИред
рдЕрддрд┐рд░рд┐рдХреНрдд рдкрд░реАрдХреНрд╖рдг рдорд╛рдорд▓рд╛:
html {
font-size: min(max(16px, 4vw), 22px);
}
рдкреИрджрд╛рд╡рд╛рд░ SassError: Internal Error: Incompatible units: 'px' and 'vw'.
@ рдореИрдХреНрд╕рдлреЗрдВрдЯрди рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ:
https://github.com/sass/sass/issues/2378#issuecomment -433868712
рдореИрдВрдиреЗ Sass unquote()
рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдЕрдкрдиреЗ рдореБрджреНрджреЛрдВ рдХреЛ рд╣рд▓ рдХрд┐рдпрд╛ рдФрд░ рдЙрд╕ рдкрд░ рдмреНрд░рд╢ рдХрд░рдиреЗ рдХреА рдЕрдиреБрд╢рдВрд╕рд╛ рдХреА рдпрджрд┐ рдЖрдкрдХреЛ рд╕реАрдПрд╕рдПрд╕ рдлрд╝рдВрдХреНрд╢рдВрд╕ рдХреЛ рдЖрдЙрдЯрдкреБрдЯ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдЬрд┐рд╕реЗ рд╕реИрд╕ рд╡реНрдпрд╛рдЦреНрдпрд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реИред рдПрдХреНрд╕рдУ
@maxfenton рдХреЗ рд╕рдорд╛рдзрд╛рди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╡рд┐рд╕реНрддрд╛рд░ рд╕реЗ width: unquote("min(500px, 90%)");
@maxfenton рдХреЗ рд╕рдорд╛рдзрд╛рди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╡рд┐рд╕реНрддрд╛рд░ рд╕реЗ
width: unquote("min(500px, 90%)");
рдЬрдм рдореИрдВ min(10vw + 10%, 100px);
рд╕рд╛рде рдлрдВрд╕ рдЧрдпрд╛ рддреЛ рдпрд╣ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ
рдпрд╣ рдЗрдВрдЯрд░рдкреЛрд▓реЗрд╢рди рдХреЗ рд╕рд╛рде рднреА рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред
$test: 20vw;
width: unquote("max(#{$test} + 10%, 100px)");
рд╕рд╛рдЭрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред
рдпрд╣ рд╡реНрдпрд╡рд╣рд╛рд░ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рднреНрд░рдорд┐рдд рдХрд░рдиреЗ рд╡рд╛рд▓рд╛ рд╣реИ рдФрд░ рдЗрд╕реЗ рдареАрдХ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред рдЬрдм рдореИрдВ рдмрд╕ рдХреБрдЫ CSS рдХреЛрдб рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рдерд╛, рддреЛ рдореБрдЭреЗ рдкрддрд╛ рдирд╣реАрдВ рдЪрд▓рд╛ рдХрд┐ рдореБрдЭреЗ рд╕рд░реНрд╡рд░-рд╕рд╛рдЗрдб рддреНрд░реБрдЯрд┐ рдХреНрдпреЛрдВ рд╣реБрдИ... рд╕рдорд╕реНрдпрд╛ рдпрд╣ рдереА рдХрд┐ min
рдХреЛ SASS рдлрд╝рдВрдХреНрд╢рди рдХреЗ рд░реВрдк рдореЗрдВ рд╡реНрдпрд╛рдЦреНрдпрд╛ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ред
рдЗрд╕реЗ рдмрдВрдж рдХрд░рдирд╛ рдХреНрдпреЛрдВрдХрд┐ LibSass рдХреЛ рдЕрдм рдкрджрд╛рд╡рдирдд рдХрд░ рджрд┐рдпрд╛
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
@maxfenton рдХреЗ рд╕рдорд╛рдзрд╛рди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╡рд┐рд╕реНрддрд╛рд░ рд╕реЗ
width: unquote("min(500px, 90%)");