서브라임 텍스트 2는 세계적으로 개발자들에게 인기있는 텍스트 에디터입니다. 스킨도 여러 종류가 있어서 선택할 수 있고 개발자들이 많이 사용하고 있어서 그런지 플러그인도 아주 많이 만들어져서 손쉽게 설치해서 사용할 수 있습니다. 현재 베타 개발단계를 벗어나서 정식버전으로 됐지만 아직 무료로 사용할 수 있습니다. 언제 유료로 전환될지는 모르지만 그 전까지는 비등록 버전인 경우 파일을 저장할 때 가끔씩 구매를 유도하는 메시지가 나오기도 합니다. 이전 글에 이어서 서브라임 텍스트 2에 Less 컴파일러 플러그인을 설치해 사용하는 방법을 알아보겠습니다.
위 링크로 이동해서 파일을 내려받아 설치합니다.
크로스 플랫폼의 텍스트 에디터라서 각 OS 별로 버전이 있습니다. 포터블 버전도 있네요.
less2.zip설치를 한 후에 프로그램을 열면 위와 다른 스킨으로 돼있습니다. 메뉴에서 Preferences->Color Scheme을 선택하면 여러가지 스킨을 선택할 수 있습니다. 위 스킨은 Mac Classic입니다. 두개의 창으로 나누려면 View-Layout에서 선택하면 됩니다. 좌측의 사이드바는 View->Side Bar에서 선택합니다. 이전 프로그램들처럼 프로젝트 폴더를 클릭 드래그해서 사이드바의 빈 공간에 배치하면 폴더가 열립니다. less 파일을 열고 보면 CSS 파일과는 달리 컬러 코딩이 안돼있습니다. 이제부터 less 파일을 컬러로 나타나게 하고 컴파일러, prefixr 플러그인을 설치해보겠습니다.
http://wbond.net/sublime_packages/package_control/installation
플러그인을 설치하기 전에 우선 패키지를 제어할 수 있도록 패키지 컨트롤을 설치합니다. 위 링크로 이동해서 아래처럼 코드를 블럭설정해서 복사합니다.
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')
서브라임에서 Ctrl+`(탭키 위에 있는 키)를 누르면 콘솔 입력창이 나옵니다. 입력란에 붙여넣고 엔터키를 친 다음 좀 기다리면 콘솔 창에 메시지가 나옵니다. 설치를 완료하려면 서브라임을 재시작하라고 합니다.
재시작한 다음 Ctrl+Shift+P 키를 누르면 위와같은 창이 나옵니다. 아래로 조금 스크롤해서 Package Control: Install Package를 클릭합니다.
입력란에 less 를 입력하면 Less 관련 플러그인이 나타나는데 Less와 Less-build를 설치합니다. Less를 먼저 클릭하면 에디터 하단의 까만 줄에 메시지가 나오면서 이퀄싸인( = )이 좌우로 이동하면서 설치중임을 표시합니다.
View-Syntax를 클릭하면 이제 Less가 보입니다. 이를 클릭하면 컬러로 나타납니다. 코드가 갑자기 충격을 받아서 이상하게 나오는 경우 파일을 닫고 다시 열면 정상으로 보입니다.
같은 방법으로 이번에는 Less-build를 설치합니다.
Less-build를 설치한 후에 Less 파일을 수정한 다음 Ctrl+B키를 누르면 하단에 콘솔 창이 나오면서 저장됩니다. 스타일시트 창을 클릭하면 style.css에도 적용됩니다. 콘솔 창을 닫으려면 Ctrl+' 키를 두번 누르면 됩니다.
같은 방법으로 pre 로 검색해서 Prefixr를 설치합니다. 이 플러그인은 이전 글에서 알아봤듯이 아직 웹표준이 아닌 CSS3 규칙에서 웹브라우저별 접두어를 자동으로 붙여주는 기능을 합니다. style.css 창에서 해당 규칙이 있는 중괄호 부분을 클릭하고 Ctrl+Alt+x키를 누르면 위처럼 자동으로 만들어줍니다.
몇 개의 글을 통해서 여러가지 Less 컴파일러를 사용하는 방법을 알아봤는데 취향에 따라서 원하는 방법을 사용하면 됩니다.
