์๋
ํ์ธ์!
์ ๋ ํ์ฌ ๋
ผ๋ฌธ์ ์ํด 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๋ฅผ ์ป๋ ๋ฐฉ๋ฒ์ ๋ํ ํํธ๋ฅผ ์ป์ ์ ์์๊น์? ํ๋ก์ ํธ, ์์ค ํ์ผ์ ์๊ณ ์๋ค๋ฉด?
๋์์ด ๋ ๊น์? 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);
})
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ฐ์ฌํฉ๋๋ค. ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค :) ๋๊ตฐ๊ฐ๊ฐ ๋์ผํ ์ฅ์ ๋ฌผ์ ์ง๋ฉดํ์ฌ ์ด ๋ฌธ์ ์ ์ง๋ฉดํ ๊ฒฝ์ฐ๋ฅผ ๋๋นํ์ฌ AST๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐ ์ฌ์ฉํ ์ค์ ์ฝ๋๋ฅผ ์ฌ๊ธฐ์ ๋ฃ์ต๋๋ค.