작성일자
카테고리 디자인툴/서브라임 텍스트

서브라임 텍스트 2는 세계적으로 개발자들에게 인기있는 텍스트 에디터입니다. 스킨도 여러 종류가 있어서 선택할 수 있고 개발자들이 많이 사용하고 있어서 그런지 플러그인도 아주 많이 만들어져서 손쉽게 설치해서 사용할 수 있습니다. 현재 베타 개발단계를 벗어나서 정식버전으로 됐지만 아직 무료로 사용할 수 있습니다. 언제 유료로 전환될지는 모르지만 그 전까지는 비등록 버전인 경우 파일을 저장할 때 가끔씩 구매를 유도하는 메시지가 나오기도 합니다. 이전 글에 이어서 서브라임 텍스트 2에 Less 컴파일러 플러그인을 설치해 사용하는 방법을 알아보겠습니다.


http://www.sublimetext.com/2


위 링크로 이동해서 파일을 내려받아 설치합니다.



크로스 플랫폼의 텍스트 에디터라서 각 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 컴파일러를 사용하는 방법을 알아봤는데 취향에 따라서 원하는 방법을 사용하면 됩니다.  


저작자 표시 비영리 변경 금지
신고

비밀댓글입니다

BlogIcon 베누시안

http://martian36.tistory.com/notice/991 공지글을 봐주세요

태안군

컨트롤 B를 눌러도 아무 내용이 안뜨고 저장이 안되는것 같은데요;;
왜그럴까요;

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 저도 그런 에러가 발생하면 해결하는 방법을 찾아봤을텐데 알수 없네요. less 파일은 CSS 파일을 만들기 위한 것이라서 CSS 파일을 만들 일이 없습니다. less는 보다 쉽게 CSS를 만들기 위한 도구이거든요. 이것도 CSS를 잘 알아야 쉽답니다.

티스토리 툴바