[SASS 환경설정] sass를 사용해 퍼블리싱 하자![2] - sublime text 3 플러그인 설치

1편에서는 windows 환경에서 sass를 설치하는 방법에 대해 알아봤습니다.

sass로 css를 작성하기 위해 .scss 파일을 생성하게 되는데, 이 파일을 어떤 에디터로 작성/수정 할 것인지에 대한 부분은 풀어드리지 못했습니다. 해서, 요즘 제가 자주 사용하는 sublime text 3 라는 에디터에 플러그인을 설치해 scss 파일의 포멧에 색상을 입히는 방법에 대해 설명하려 합니다.

sublime text 3 에디터는 html, css, javascript 코딩을 위해 사용하고 있는데요, 무게도 가볍고 사용하기 편해 최근에 자주 사용하게 된 에디터입니다.

우선 sublime text 3를 다운받고 설치하도록 하겠습니다.

[sublime text 3 Beta 다운받기 >>]

사이트로 이동하시면 위 사진과 같은 화면이 출력됩니다. "Download for Windows"라는 버튼 위에 마우스를 올리시면 Sublime Text 3 Beta를 다운받을 수 있는 페이지로 이동할 수 있습니다. 이동 후 windows 버전에 맞는 파일을 받으시면 되는데, Potable 버전을 다운받으시면 설치 없이 압축을 푸는 것 만으로도 사용하실 수 있습니다. 입맛에 맞게 골라 설치합니다.

> 해당 에디터의 자세한 사용방법은 다른 글을 참조하시기 바랍니다. <

설치 후 패키지를 사용하기 위해 컨트롤러를 설치해 보겠습니다. 이 에디터는 기본적으로 컨트롤러 플러그인을 내장하고 있지 않기 때문에 직접 설치하셔야 합니다.(sass를 사용하기 전에는 기본으로 사용했습니다)

컨트롤러를 인스톨 하는 방법은 두 가지가 있습니다.

1. 메뉴 > View > Show Console 후 콘솔창에 텍스트를 입력하여 설치하는 방법

(전 인스톨버전이 아니어서 그런지 오류 메세지가 나왔습니다)

2. 플러그인 파일을 받아 플러그인 폴더에 넣어 설치하는 방법

2번 방법으로 설치하는 방법만 설명해 드리겠습니다. 우선 아래 링크를 클릭하시면 sublime package 파일을 다운받으실 수 있습니다.

[링크 클릭 >>]

다운받으신 Package Control.sublime-package 파일을 sublime 하위 폴더에 넣으셔야 합니다. 설치할 폴더로 이동하기 위해 에디터 메뉴에서 Preferences > Browse Package... 메뉴를 클릭합니다.

해당 폴더에서 상위폴더로 올라가면 Installed Packages 라는 폴더가 있는데 이 폴더 안에 위에서 다운받은 다운받은 파일을 복사하고 sublime text를 다시 실행하면 package control을 사용할 수 있습니다.

추가] 위의 패키지 설치는 cmd를 사용하지 않고 sublime text 3에서 컨버팅 하기 위한 방법입니다. 저희는 view를 위한 세팅이기 때문에 사용하지 않습니다.

이제 sass-textmate-bundle을 다운받아 설치해야 할 차례입니다.

git을 사용할 줄 아시는 분은

https://github.com/nathos/sass-textmate-bundle.git 으로 받으시면 됩니다.

git을 사용할 줄 모르는 분은

https://github.com/nathos/sass-textmate-bundle

위의 사이트로 이동하셔서 우측의 Download ZIP 파일을 받으시면 됩니다.

다운로드 받은 zip파일을 Sublime 설치폴더\Data\Packages\User 폴더에 폴더째 압축을 풉니다.

[압축 풀기를 완료한 화면]

압축이 완료되었습니다. 이제 만들어둔 scss 파일을 에디터에서 열면 색상이 추가되어 보입니다!!!!

[변경된 화면]

앞으로 sass를 통해 알게되는 부분을 조금씩 포스팅 할 예정입니다.

(다음 단계 첫 게시물엔 꼭 필요한 sass 명령어도 조금 다룰 것 같습니다) - 미정...

읽어주셔서 감사합니다.