설치방법
LESS 를 서버에 설치하는 가장 쉬운 방법은 npm, 노드 패키지 매니저(Node Package Manager) 를 이용하는 겁니다. 방법은 다음과 같습니다:
1 | $ npm install less |
사용하는 방법
일단 설치하고 나면, 노드에서 컴파일러를 호출할 수 있습니다. 다음처럼 하면 됩니다:
1 2 3 4 | var less = require( 'less' ); less.render( '.class { width: 1 + 1 }' , function (e, css) { console.log(css); }); |
위의 내용을 class.js라는 파일에 저장하고 node로 실행합니다.
1 | node class.js |
결과는 아래와 같습니다.
1 2 3 | .class { width : 2 ; } |
파서와 컴파일러를 수동으로 호출할 수도 있습니다.
1 2 3 4 5 6 | var parser = new (less.Parser); parser.parse( '.class { width: 1 + 1 }' , function (err, tree) { if (err) { return console.error(err) } console.log(tree.toCSS()); }); |
환경설정
몇개의 옵션을 컴파일러에게 넘겨줄 수 있습니다.
1 2 3 4 | var parser = new (less.Parser)({ paths: [ '.' , './lib' ], //@import 명령어를 사용할 때, 파일을 검색할 경로를 지정합니다. filename: 'style.less' //좀 더 자세하고 정확한 에러메시지를 보시려면, 파일명을 지정하세요. }); |
1 2 3 | parser.parse( '.class { width: 1 + 1 }' , function (e, tree) { tree.toCSS({ compress: true }); // 만든 CSS를 최소화(minify)시킵니다. (역자주 : 최소화(Minify) : CSS파일에서는 가독성을 높이기 위해 공백문자를 많이 사용한다. 이런 것을 최소화시켜 CSS 사이즈를 줄인다.)) }); |
커맨드 라인 명령 사용법
Less 안에는 커맨드 라인에서 컴파일러를 호출하는 실행 파일이 있습니다:
1 | $ lessc styles.less |
이렇게 만들어진 CSS를 파일에 저장하고 싶다면 아래와 같이 하세요.
1 | $ lessc styles.less > styles.css |
사이즈를 최소화시킨 CSS를 출력하기 위해서는 단지 -x 옵션을 추가하면 됩니다. 더욱 더 최소화시키고 싶다면 YUI CSS Compressor를 --yui-compress 옵션을 통해 사용할 수 있습니다.