Less.js: LESS๋Š” ๋‹ซํžŒ ๊ด„ํ˜ธ์—์„œ ์ง€๋„๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. }

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

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

์ด๊ฒƒ์€ 2.7.1์—์„œ ์—ฌ์ „ํžˆ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

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

@bassjobsen ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์—ฐ๊ฒฐ๋œ ๋ฒ„๊ทธ์—์„œ ๋ช‡ ๊ฐ€์ง€ ์˜ˆ๋ฅผ ์‹œ๋„ํ–ˆ์ง€๋งŒ ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
NS. ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค(๋˜๋Š” ์ด ๊ฒฝ์šฐ x๋Š” ํ•ญ์ƒ ๋ฐœ์ƒ)
NS. ์‹ค์ œ ์ถœ๋ ฅ
์”จ. ์˜ˆ์ƒ ์ถœ๋ ฅ

์•ˆ๋…•ํ•˜์„ธ์š” ๋ฃจํฌ๋‹˜
์ฒซ์งธ, ํ•ด๊ฒฐ๋˜์ง€ ์•Š๊ฑฐ๋‚˜ ๋ชจํ˜ธํ•œ ์งˆ๋ฌธ์œผ๋กœ ๋‹น์‹ ์„ ๊ท€์ฐฎ๊ฒŒํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ฐ„๋‹จํžˆ ๋งํ•ด์„œ ๋‚ด๊ฐ€ ์ฐพ์€ ๊ฒƒ :

๋‚ด Less ํŒŒ์ผ, t.less :

p {
color: red; 
}

๊ทธ๋Ÿฐ ๋‹ค์Œ lessc t.less t.css --source-map --autoprefix ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ t.css.map์— ๋‹ค์Œ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

{"version":3,"sources":["t.less","t.css"],"names":[],"mappings":"AAAA;EACA,YAAA;ECCC","file":"t.css"}

autoprefixer ์—†์ด: lessc t.less t.css --source-map ์†Œ์Šค๋งต์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค:

{"version":3,"sources":["t.less"],"names":[],"mappings":"AAAA;EACA,UAAA","file":"t.css"}

autoprefixer๋ฅผ ์‹คํ–‰ํ•œ ํ›„ ๋ณผ ์ˆ˜ ์žˆ๋“ฏ์ด ์ถœ๋ ฅ์€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์ง€๋งŒ ์†Œ์Šค ๋งต์€ ๋ณ€๊ฒฝ๋˜๊ณ  ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.
์†Œ์Šค๋กœ ์ถœ๋ ฅ ํŒŒ์ผ. ๋‚ด๊ฐ€ ์ดํ•ดํ•˜๊ณ  ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ๋Š” ํ•œ ์ด๊ฒƒ์€ SASS์˜ ๋™์ผํ•œ ์ฝ”๋“œ์™€๋„ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.
์ฐธ์กฐ: https://github.com/postcss/autoprefixer-core/issues/27#issuecomment -71343166

๊ฒฐ๊ตญ autoprefixer๊ฐ€ ์ด๋Ÿฌํ•œ ๊ทœ์น™์˜ ์†Œ์Šค๊ฐ€ ๋˜์–ด์•ผ ํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ๊ทœ์น™์„ ์ถ”๊ฐ€ํ•˜๋Š” ์ƒํ™ฉ์—์„œ ์œ„์˜ ์˜ฌ๋ฐ”๋ฅธ ๊ฒฐ๊ณผ๊ฐ€ ๊ฐ€๋Šฅํ•œ ๋ชจํ˜ธํ•œ ์›์ธ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๋‹ค์‹œ ๋‚˜๋Š” ๋‹น์‹ ์˜ ์‹œ๊ฐ„์„ ๋‚ญ๋น„ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ์‹ค์ œ๋กœ ๋ฌธ์ œ์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์œผ๋ฉฐ ๊ทธ๊ฒƒ์ด ๋ˆ„๊ตฐ๊ฐ€๋ฅผ ๋‹ค์น˜๊ฒŒ ํ•  ๊ฒƒ์ธ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์•„ ์˜ˆ, ์ด๊ฒƒ์€ ๋ฐฉ๊ธˆ ๋‹ซ์€ ap์— ๋Œ€ํ•ด ์ œ๊ธฐํ•œ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿด ๊ฒŒ์š”
์—ฐ๊ฒฐ๋œ ๋ฌธ์ œ๋ฅผ ๋‹ค์‹œ ๋ณด๊ณ  ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.

์ด๊ฒƒ์€ 2.7.1์—์„œ ์—ฌ์ „ํžˆ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ 3.11.1์—์„œ ์—ฌ์ „ํžˆ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ์†Œ์Šค ๋งต์—๋Š” ๋‹ซ๋Š” ๋Œ€๊ด„ํ˜ธ์— ๋Œ€ํ•œ ๋งคํ•‘์ด ์—†์Šต๋‹ˆ๋‹ค. ์†Œ์Šค๊ฐ€ ์ ์€ ํŒŒ์ผ, ์ƒ์„ฑ๋˜๋Š” ์†Œ์Šค ๋งต ๋ฐ ์ถœ๋ ฅ CSS ํŒŒ์ผ์„ ์••์ถ•ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ฒ„๊ทธ๋ฅผ ๋ณด๋Š” ๋ฐ ๋„์›€์ด ๋œ๋‹ค๋ฉด https://sokra.github.io/source-map-visualization/#custom์œผ๋กœ ์ด๋™ํ•˜์—ฌ ์‹œ๊ฐํ™” ๋„๊ตฌ์— ํŒŒ์ผ์„ ๋กœ๋“œํ•˜๊ณ  ๋ฒ„๊ทธ๋ฅผ ์ง์ ‘ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์ด ๊ณ ํ†ต์Šค๋Ÿฌ์šด ์ด์œ ๋Š” ์—ฌ๋Ÿฌ ๋‹จ๊ณ„์˜ ๋ณ€ํ™˜์„ ํŒŒ์ผ์— ์ ์šฉํ•  ๋•Œ์ž…๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด Less -> CSS -> Autoprefixed CSS -> ์—ฐ๊ฒฐ๋œ CSS ํŒŒ์ผ
๋งˆ์ง€๋ง‰ ๋‹จ๊ณ„์—์„œ ์ฒ˜์Œ ๋‹จ๊ณ„๋กœ ๋Œ์•„๊ฐ€๋Š” ์†Œ์Šค ๋งต์„ ๋งŒ๋“ค๋ ค๋ฉด ๊ฐ ๋งต์ด ์™„๋ฃŒ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

less_bug.zip

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