Libsass: CSS min() ๋ฐ max() ์ง€์›

์— ๋งŒ๋“  2018๋…„ 07์›” 25์ผ  ยท  9์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: sass/libsass

Compatibility - P3 Dart Backport Done Sass 3.6

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@maxfenton ์˜ ์†”๋ฃจ์…˜์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ ์˜ˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. width: unquote("min(500px, 90%)");

๋ชจ๋“  9 ๋Œ“๊ธ€

ํ”„๋กœ์ ํŠธ์— 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๋Š” ์ด์ œ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์œผ๋ฉฐ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•  ๊ฒƒ์œผ๋กœ ๊ธฐ๋Œ€ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ด ์ž‘์—…์„ ์ข…๋ฃŒํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰