Less.js: calc -- ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 03์›” 10์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: less/less.js

[less.min.js - v2.5.3]
" width:calc (100% - 35px);"์™€ ๊ฐ™์€ '๊ณ„์‚ฐ'์„ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค. 35px๋ฅผ ๋ฐฑ๋ถ„์œจ๋กœ ๊ณ„์‚ฐํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, 100% - 35%(ํŽ˜์ด์ง€ ํ‘œ์‹œ ๋„ˆ๋น„:65%)์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ์—ฌ์ „ํžˆ LESS๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜๊ณ  ์ด๊ฒƒ์ด ๋ฒ„๊ทธ์ธ์ง€ ์•„๋‹ˆ๋ฉด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์žˆ๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ?

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

๋‹ค์Œ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

width: ~"calc(100% - 35px)";

์—ฌ๊ธฐ์—์„œ ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

๋‹ค์Œ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

width: ~"calc(100% - 35px)";

์—ฌ๊ธฐ์—์„œ ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

--strict-math ๋ฐ ์ด์Šค์ผ€์ดํ”„ ๊ตฌ๋ฌธ์˜ ์˜ˆ(๊ธฐ๋ณธ --strict-math=off ์˜ ๊ฒฝ์šฐ )๋ฅผ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

์˜ˆ์ƒ๋Œ€๋กœ ๋‹ซํž™๋‹ˆ๋‹ค.

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