Less.js: Less๋Š” ์ƒˆ๋กœ์šด ์ˆ˜ํ•™ ํ•จ์ˆ˜(์˜ˆ: min, max)๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2020๋…„ 01์›” 16์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: less/less.js

border-width: max(.01rem, 1px);

์ด ์ฝ”๋“œ๋Š” ์ปดํŒŒ์ผ ํ”„๋กœ์„ธ์Šค๋ฅผ ์ค‘๋‹จํ•ฉ๋‹ˆ๋‹ค.

feature request high priority

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

์ฐธ๊ณ : ์ด๋Š” ๊ด€๋ จ clamp() ํ•จ์ˆ˜์—๋„ ํ•ด๋‹น๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•œ ์ด ๋ฌธ์ œ๋ฅผ ์ ‘ํ•˜๋Š” ์‚ฌ๋žŒ์€ ํ•ญ์ƒ LESS์˜ ๋ฌธ์ž์—ด ์ด์Šค์ผ€์ดํ”„ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ผ๋ฐ˜ ๋ฌธ์ž์—ด์„ CSS์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

border-width: ~"max(.01rem, 1px)";

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

์ฐธ๊ณ : ์ด๋Š” ๊ด€๋ จ clamp() ํ•จ์ˆ˜์—๋„ ํ•ด๋‹น๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•œ ์ด ๋ฌธ์ œ๋ฅผ ์ ‘ํ•˜๋Š” ์‚ฌ๋žŒ์€ ํ•ญ์ƒ LESS์˜ ๋ฌธ์ž์—ด ์ด์Šค์ผ€์ดํ”„ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ผ๋ฐ˜ ๋ฌธ์ž์—ด์„ CSS์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

border-width: ~"max(.01rem, 1px)";

@kbav ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ •๋ง ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค!

Less ๋ณ€์ˆ˜(์˜ˆ: max(@my-var, 1px) )๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@my-var: .01rem;
--my-var: @my-var;
border-width: ~"max(var(--my-var), 1px)";

Less 4๋ถ€ํ„ฐ ์ž‘๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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