ํ๋ก์ ํธ์ 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()
๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ผ๋ฉฐ Sass๊ฐ ํด์ํ๋ ค๋ CSS ๊ธฐ๋ฅ์ ์ถ๋ ฅํด์ผ ํ๋ ๊ฒฝ์ฐ ์ด๋ฅผ ์ ๋ฆฌํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์์
@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%)");