서버쪽 사용법

설치방법

LESS 를 서버에 설치하는 가장 쉬운 방법은 npm, 노드 패키지 매니저(Node Package Manager) 를 이용하는 겁니다. 방법은 다음과 같습니다:

$ npm install less

사용하는 방법

일단 설치하고 나면, 노드에서 컴파일러를 호출할 수 있습니다. 다음처럼 하면 됩니다:

var less = require('less');
less.render('.class { width: 1 + 1 }', function (e, css) {
   console.log(css);
});

위의 내용을 class.js라는 파일에 저장하고 node로 실행합니다.

node class.js

결과는 아래와 같습니다.

.class {
 width: 2;
}

파서와 컴파일러를 수동으로 호출할 수도 있습니다.

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
   if (err) { return console.error(err) }
   console.log(tree.toCSS());
});

환경설정

몇개의 옵션을 컴파일러에게 넘겨줄 수 있습니다.

var parser = new(less.Parser)({
   paths: ['.', './lib'], //@import 명령어를 사용할 때, 파일을 검색할 경로를 지정합니다. 
   filename: 'style.less' //좀 더 자세하고 정확한 에러메시지를 보시려면, 파일명을 지정하세요.
});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {
   tree.toCSS({ compress: true }); // 만든 CSS를 최소화(minify)시킵니다. (역자주 : 최소화(Minify) : CSS파일에서는 가독성을 높이기 위해 공백문자를 많이 사용한다. 이런 것을 최소화시켜 CSS 사이즈를 줄인다.))
});

커맨드 라인 명령 사용법

Less 안에는 커맨드 라인에서 컴파일러를 호출하는 실행 파일이 있습니다:

$ lessc styles.less

이렇게 만들어진 CSS를 파일에 저장하고 싶다면 아래와 같이 하세요.

$ lessc styles.less > styles.css

사이즈를 최소화시킨 CSS를 출력하기 위해서는 단지 -x 옵션을 추가하면 됩니다. 더욱 더 최소화시키고 싶다면 YUI CSS Compressor를 --yui-compress 옵션을 통해 사용할 수 있습니다.