Less.js: ํŒŒ์„œ์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹ ์‚ฌ์šฉ

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

์•ˆ๋…•ํ•˜์„ธ์š”!
์ €๋Š” ํ•™์‚ฌ ๋…ผ๋ฌธ์„ ์œ„ํ•ด less2sass ๋ณ€ํ™˜๊ธฐ๋ฅผ ์ž‘์—… ์ค‘์ž…๋‹ˆ๋‹ค. ๋‚˜์ค‘์— sass2less ๋ณ€ํ™˜๊ธฐ๋„ ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ ์€ ํ”„๋กœ์ ํŠธ์—์„œ AST๋ฅผ ์–ป๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์ฝ”๋“œ๋กœ ์‹คํ—˜ํ–ˆ์Šต๋‹ˆ๋‹ค.

var parser = new(less.Parser)({}, {contents: {}}, {});
var contents = ".foo {\
  background: #900;\
}\
<strong i="7">@import</strong> \"import/this-is-valid.less\";";
parser.parse(contents, function (e, tree) {
   console.log(JSON.stringify(tree, null, 2));
});

๋‹ค๋ฅธ ์ ์€ ํŒŒ์ผ์„ ๊ฐ€์ ธ์˜ค์ง€ ์•Š๋Š” ํ•œ AST๋ฅผ ๋‹ค์‹œ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. ์ฝ”๋“œ์—์„œ ๋‚ด๊ฐ€ ์ดํ•ดํ•œ ๊ฒƒ์€ ํŒŒ์„œ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ•„์š”ํ•œ importManager์— ์˜ํ•ด ์ƒ์„ฑ๋œ ์‚ฌ์šฉ๋œ ๊ฐ€์ ธ์˜ค๊ธฐ๋กœ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๊ฐ€์ ธ์™€์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. AST๋ฅผ ์–ป๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ํžŒํŠธ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์„๊นŒ์š”? ํ”„๋กœ์ ํŠธ, ์†Œ์Šค ํŒŒ์ผ์„ ์•Œ๊ณ  ์žˆ๋‹ค๋ฉด?

needs info

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

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค :) ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๋™์ผํ•œ ์žฅ์• ๋ฌผ์— ์ง๋ฉดํ•˜์—ฌ ์ด ๋ฌธ์ œ์— ์ง๋ฉดํ•  ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•˜์—ฌ AST๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์‹ค์ œ ์ฝ”๋“œ๋ฅผ ์—ฌ๊ธฐ์— ๋„ฃ์Šต๋‹ˆ๋‹ค.

var less = require('less')
  , fs = require('fs')
  , path = require('path');

var src = './test_import.less'; //some less source file
var result = less.parse(fs.readFileSync(src).toString(), {
  filename: path.resolve(src)
}, function(e, tree) {
  console.log(JSON.stringify(tree, null, 2));
});

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

๋„์›€์ด ๋ ๊นŒ์š”? https://github.com/matthew-dean/postcss-less/blob/master/lib/render.js

์ด ๋ฐฉ๋ฒ•์œผ๋กœ ํ‰๊ฐ€๋œ AST ํŠธ๋ฆฌ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ๊ณ  ํ‰๊ฐ€๋œ ํŠธ๋ฆฌ์— ํ‰๊ฐ€๋˜์ง€ ์•Š์€ ํŠธ๋ฆฌ์— ๋Œ€ํ•œ ์ฐธ์กฐ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์ ์€ ํŒŒ์ผ์„ ๊ฐ€์ ธ์˜ค์ง€ ์•Š๋Š” ํ•œ AST๋ฅผ ๋‹ค์‹œ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

์ˆ˜์ž…ํ’ˆ์˜ ๊ฒฝ์šฐ์—๋Š” ์ฐจ์ด๊ฐ€ ์—†์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ ์‚ฌํ•ญ์„ ๋†“์น˜์ง€ ์•Š๋„๋ก ํ•˜์‹ญ์‹œ์˜ค.

๊ทธ๋Ÿฐ ๋‹ค์Œ ์˜ต์…˜์˜ ํŒŒ์ผ ์ด๋ฆ„ ํ•„๋“œ๋ฅผ ๊ธฐ๋ณธ ํŒŒ์ผ์˜ ํŒŒ์ผ ์ด๋ฆ„์œผ๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. less๋Š” ๋ชจ๋“  ์ˆ˜์ž… ์ฒ˜๋ฆฌ๋ฅผ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

programmatic-usage์—์„œ (์ž์„ธํ•œ ๋‚ด์šฉ์€ https://github.com/less/less.js/issues/2342#issuecomment-67596931 ์ฐธ์กฐ).

ํŒŒ์„œ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ปจํ…์ŠคํŠธ๋ฅผ ํ•„์š”๋กœ ํ•˜๋Š” importManager์— ์˜ํ•ด ์ƒ์„ฑ๋œ ์‚ฌ์šฉ๋œ ๊ฐ€์ ธ์˜ค๊ธฐ์™€ ํ•จ๊ป˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๊ฐ€์ ธ์™€์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์„ค๋งˆ. importManager๋Š” (๋Œ€๋žต) ํŒŒ์„œ์˜ ์ผ๋ถ€์ด๊ณ  ๋ชจ๋“  ๊ฐ€์ ธ์˜ค๊ธฐ๋Š” (์ผ๋ฐ˜์ ์œผ๋กœ) ํŒŒ์„œ ์ž์ฒด ๋‚ด์—์„œ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค :) ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๋™์ผํ•œ ์žฅ์• ๋ฌผ์— ์ง๋ฉดํ•˜์—ฌ ์ด ๋ฌธ์ œ์— ์ง๋ฉดํ•  ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•˜์—ฌ AST๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์‹ค์ œ ์ฝ”๋“œ๋ฅผ ์—ฌ๊ธฐ์— ๋„ฃ์Šต๋‹ˆ๋‹ค.

var less = require('less')
  , fs = require('fs')
  , path = require('path');

var src = './test_import.less'; //some less source file
var result = less.parse(fs.readFileSync(src).toString(), {
  filename: path.resolve(src)
}, function(e, tree) {
  console.log(JSON.stringify(tree, null, 2));
});

๊ตฌ๋ฌธ ๋ถ„์„ ๊ธฐ๋Šฅ์ด ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ๋ฌด์‹œํ•˜๋Š” ์˜ต์…˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์ œ ๊ฒฝ์šฐ์—๋Š” ์ž„ํฌํŠธ ๊ฒฝ๋กœ์— ๋Œ€ํ•œ ๋ช‡ ๊ฐ€์ง€ ํŠน๋ณ„ํ•œ ๊ทœ์น™์ด ์žˆ์œผ๋ฏ€๋กœ less.js์˜ ๋‚ด๋ถ€ ์ž„ํฌํŒ… ํ”„๋กœ์„ธ์Šค๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ‰๊ฐ€ ์—†์ด ๋ฌธ์ž์—ด์„ AST๋กœ ๊ตฌ๋ฌธ ๋ถ„์„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋ฐฉ๊ธˆ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ฝ๊ณ  { processImports: false } ๋ฅผ ์ „๋‹ฌํ•˜์—ฌ ๊ฐ€์ ธ์˜ค๊ธฐ ํ”„๋กœ์„ธ์Šค๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค.

less.parse(content, { processImports: false }, (e, tree) => {
  if (e) { return console.error(e) };
  return console.log(tree);
})

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