[Sublime Text 3] 서브라임텍스트를 이용하여 scss 컴파일 하기

SCSS를 컴파일 하기위해

Front 기술로 nodeJS 나 SASS 또는 Compass 로 컴파일하여 css 로 변환해 줍니다.

그 보다 좀더 간편한 작업에 있어

서브라임텍스트를 이용한 SCSS 컴파일 방법에 대해 알아보려 합니다.

우선 Ruby 와 scss가 설치 되어 있어야 합니다.

그에 관한 설명은 하단을 참고하시기 바랍니다.

SASS 설치방법

서브라임에서 

SASS관련 패키지가 존재합니다.

ctrl + shift + P 를 누르시고 PCI 를 누르시어 package install을 선택!

sass 와 sass Build 패키지를 설치해 줍니다.

우선 어느정도 준비는 끝났습니다.

그럼 컴파일 하는 패키지를 직접 설치해 보죠~

https://github.com/alexlitel/Sass-Build-SublimeText2

위 URL로 들어가 패키지를 다운받아 줍니다.

다운받고 압축을 풀면 아래와 같은 파일이 존재합니다.

빨간 영역부분을 제외한 나머지 부분은 필요없으니 지우도록 합니다.

그리고 저 파일을 서브라임 패키지가 설치된 영역에 넣어 줘야 합니다.

패키지 설치부분의 폴더는 아래와 같이 열면 됩니다.

Packages 폴더에 아까 다운받은 파일이 들은 폴더째로 드레그해서 넣으면 설치가 됐다고 생각하시면 됩니다.

설치 확인은 아래와 같이 확인하시면 됩니다.

설치된 영역 확인이 되시나요??

그럼 실제 컴파일을 해보겠습니다.

컴파일은 기본이 Nested 이기 때문에 Compact를 선택하여 컴파일 해보겠습니다.

컴파일은 Ctrl + B 를 눌르면 됩니다. 자 컴파일이 아래와 같이 진행 되었습니다.

css와 map파일이 만들어지면서 잘 컴파일 되었네요

근데 컴파일이 css 폴더안에 되었는데 

이부분은 제가 따로 경로 설정을 해주었기 때문입니다.

그럼 그 부분은 어떻게 하는지 알아보겠습니다.

아까 설치한 패키지 파일들 중 Sass — Compact.sublime-build 파일을 서브라임으로 열어 줍니다.

빨간 영역의 부분을 수정하였습니다.

처음에는 없는 부분인 ./css/부분을 추가하여 같은 영역에 css 폴더에 저장경로를 설정해 주었고

그 아래부분에는 자동적으로 생성되는 소스맵에 대해 생성되지 않게 none 값을 주었습니다.

저 부분은 SASS cmd 명령어가 들어가는 부분으로서 

기타 옵션에 대한 값은 CLI 창을 열러 sass -h 명령어를 실행하여 확인 바랍니다.

이상으로 

서브라임으로 scss 컴파일하는 방법에 대해 알아봤습니다.

공감 부탁드리며, 좋은 의견있으시면 댓글 부탁드립니다. ^^