Notepad++ 에서 CSS를 LESS로 코딩 하기

조's

2013. 9. 27.

업무중에 Front-End 개발을 하는 업무가 있어서 항상 Front-End에 관심을 가지고 있습니다.

뒷북일지 모르지만 프리프로세서라는 것을 알게되었고 프리프로세서 중 하나인 LESS에 대해서 정리해 봅니다.

제가 매인 편집기로 노트패드++를 사용하고 있어서 해당 편집기로 LESS를 개발할 수 있는 환경 세팅입니다.

LESS에 대한 자세한 내용은 어제 포스팅한 내용을 참조하세요

프리프로세서는 "다른 프로그램에서 사용하기 위한 데이터를 만드는 또다른 프로그램" 이라고 하는데....
그냥..

LESS, SASS/SCSS, COMPASS를 이용해서 마치 프로그램을 하는 것 처럼 변수와 내포규칙을 사용하여 CSS를 코딩 하는 것을 말합니다.

그럼 아래의 순서대로 설명을 하겠습니다.

노트패드의 플러그인에서 바로 설치해서 설정이 되게 하였으면 좋겠으나.. LESS가 나온지 얼마되지 않아 아직은 그렇게 까지 지원이 되지 않네요.

언어설정에서 LESS파일을 인식하게해서 Code Highlight되게 처리할 것입니다.

먼저 노트패드++을 실행하고 언어 >Define your language.. 를 선택 합니다.

그러면 위와같이 사용자 정의 팝업창이 뜹니다.

"가져오기" 버튼을 누르면 미리 설정되어 있는 파일을 불러 올 수 있습니다.

노트패드++의 바탕화면 색상이 흰색(기본)이면 흰바탕용 xml을 불러오면되고 바탕화면이 어두운색이면 검정바탕용 xml을 불러오면 됩니다.

아래의 파일을 다운로드 받으시면 됩니다.

정상적으로 불러왔다면 사용자 언어 부분의 콤보박스를 누르면 아래에 LESS 가 보일것입니다. 그러면 정상적으로 설정이 완료된 것입니다.

닫고 나와 언어 메뉴를 보면 아래에 LESS 항목이 생성된것이 보입니다.

해당 항목을 선택하면 .less파일에 대해 Code Highlight가 적용된것을 확인 할 수 있습니다.

코드하이라이트는 처리되었는데 제가 주로 사용하는 FingerText에서는 less가 적용되지 않습니다.

FingerText는 예약어를 사용하면 쉽게 코드를 자동으로 완성해 주는 플러그인입니다. 자세한 설명은 이전에 포스팅한 내용을 확인하시면 됩니다.

플러그인 > FingerText > Import Snippets from ftd file 을 선택해서 파일을 불러옵니다.

ftd 파일을 Import 하면됩니다.

제가 좀 급히 만드느라 Import할때 오류메시지가 뜨기는 하지만 그래도 인식이 잘 됩니다.

아래 파일을 다운로드 받으세요

수정본 올립니다. 이제 오류메시지는 없습니다.

노트패드++의 플러그인 메뉴의 FingerText중 Toggle On/off SnippetDock 메뉴를 선택하면 노트패드++ 우측에 위와 같은 데크가 나옵니다. "Ext:less"가 나오면 적용이 잘 된 것입니다.

오~ 적용도 잘 되네요.

background를 쓰고 Tab키를 누르면 쫙~ 나와요 ㅎㅎㅎ

아래에 WEB/Notepad++의 더 많은 정보에 링크를 걸어놨습니다.

JOS39 블로그