Sublime Text 2는 정말 안된는것이 없을정도입니다.

계속적으로 좀더 유용한 기능을 찾으면 찾을수록 하나 하나 늘어납니다. 기존에 이런 기능이 필요했던 사람들이 만들어놔서 찾아서 실행만 하면 되니까요.


이전에는 less 파일을 에디터에서 구문강조하는 기능을 알아봤습니다.

Sublime Text 2에서 less 파일 구문강조하기 -> http://demun.tistory.com/2230


이번에는 기존의 less 파일 컴파일도구가 아니라 직접 Sublime Text 2에서 작성하고 바로 컴파일할 수 있는 기능을 소개합니다.

https://sublime.wbond.net/packages/LESS-build

Sublime Text 2 자체가 윈도우, 맥, 리눅스 등 모든 운영체제에서 사용이 가능하니 이것도 가능합니다.

즉 여기서는 윈도우에서의 사용법입니다.

운영체제와 자세한 내용은 아래의 주소를 참고하세요.

https://github.com/berfarah/LESS-build-sublime


less 구문강조하는 방법을 알았으니 이제 컴파일 하는 방법을 알아보겠습니다.

플러그인을 설치해야하니 Ctrl+Shift+P -> Install Package -> Less-build 순서로 진행하시기 바랍니다.




플러그인 설치는 이걸로 끝입니다.

이제 간단하게 사용해보겠습니다.

저의 경우 그냥 테스트용으로 아래의 구문을 넣고 test.css 로 저장했습니다.




less 로 빌드하는것은 메뉴에 Tools - Build 를 클릭해도 되고 단축키인 Ctrl+B 를 누르면 됩니다.

동일한 폴더에 동일한 이름으로 .css 확장자를 가진 스타일 파일이 만들어집니다.

단축키를 눌러볼까요.





이렇게 간단합니다.

에디터에서 less 파일을 코딩하고 단축키 한번으로 css 파일로 컴파일합니다.


참고링크

[Design/코딩] - Sublime Text 2 플러그인 Emmet cheat-sheet

[Design/코딩] - Sublime Text 2에서 폴더 파일 빠르게 만드는 방법(AdvancedNewFile)

[Design/코딩] - Sublime Text 2에서 Fetch 설정파일

[Design/코딩] - Subline Text 2에서 YUI 를 이용하여 js, css 압축하는 방법

[Design/코딩] - Sublime Text 2에서 less 파일 구문강조하기

[Design/코딩] - Sublime Text 2에서 Package Control 설치하는 방법

[Design/코딩] - Sublime Text 2에서 Emmet 사용하는 방법

[Design/코딩] - Sublime Text 2 에서 코드정렬하기(Alignment)

[Design/코딩] - Sublime Text 2 온라인에서 코드 가져오기(Fetch)

[Design/코딩] - Sublime Text 2에서 Gist(github) 코드 불러오기,업데이트하는 방법

[Design/코딩] - Sublime Text 2로 Gist(github)에 코드 발행하는 방법

[Design/코딩] - Sublime Text 2 사이드바 확장(Enhancements)

[Design/코딩] - Sublime Text 2에서 Prefixr 사용하는 방법

[Design/코딩] - Sublime Text 2에서 Zen Coding을 사용하는 방법

[Design/코딩] - Sublime Text 2에서 Zen Coding 설치하는 방법