SASS (SCSS) 컴파일 하는 방법

[ 이글은 2017년 05월 13일에 최종 수정되었습니다. ]

SASS 사용법은 대충 알겠는데, SASS 설치하는게 힘들다고/잘 안된다고 연락주신 개발자분이 계셔서 제가 하는 방식을 알려드립니다.

일단 저에게 질문주셨던 분께는 이 글을 통해 다시한번 공개적으로 사과 드립니다.

개발자의 덕목은 뭐다? 구글링!! 이렇게 약간 장난스럽게 이메일을 보내드리고 SASS 컴파일링 하는 방법을 구글링 해보니 (한글로 되어 있는 설명글 찾으면 그 링크만 보내드리면 되니까…) 황당하게도 저도 제대로 설명된 글을 못찾았습니다. ㅠㅠㅠㅠ

한국어로된 SASS 에 관한 글도 찾기 힘들고, 컴파일 방식에 대한 내용은 더더욱 전무하네요.

SASS 설치는,

“http://rubyinstaller.org/에 방문해서 ruby를 설치한다.” 구글링 하니까 이런 내용이 나오는데, 헐ㅋ. 절대 이렇게 하시는 분이 안계시길 바랍니다.

SASS 홈피에도 이렇게 설명되어 있는데, 이건 아주 오래전 방식입니다. 왜 SASS 공홈에 SASS 설치에 대한 내용이 업데이트 안되는지, 저도 잘 모르겠지만 지금 (그러니까 2016년에) 이 방식으로 제대로 설치가 될지도 잘 모르겠습니다.

저 방식으로 설치가 제대로 되도 매우 어려운 설치 방식 입니다.

그래서 일단 근대적이며 초간단한 설치방식을 알려드리겠습니다. (일명 “핵캬웨이” 죠. ㅋㅋㅋ)

일단 저는 node-sass 를 설치할 겁니다.

https://github.com/sass/node-sass

왜 이 node-sass 패캐지로 SASS 설치를 하냐구요? node.js 때문에도 그렇고, 컴파일링때문에도 그렇고 여러가지 이유가 있기때문에 저는 node-sass 를 설치합니다. (다 똑같은 SASS 인데, 패키징이 좀 다르다고 생각하시면 됩니다.)

아, 일단 node.js 가 설치되어 있는지 확인해 보셔야 합니다. 일단 command prompt 창을 띄우세요.

Command Prompt 창에 다음과 같은 명령어를 쳐 넣으면 node.js 와 npm 이 설치되어있는지 확인하실 수 있습니다.

node -v <== node.js 설치 유무/버전 확인

npm -v <== npm 설치 유무/버전 확인

npm list -g <== npm 의 tree structure 를 확인하실 수 있습니다.

node.js 가 설치가 되어 있지 않으면 SASS 를 설치할 수 없으니 설치가 되어 있지 않다면, 일단 node.js 를 설치하고 오세요.

node.js 설치 =>고고씽

(그냥 다운받아서 설치하시면 되는거니 node.js 설치에 관해서는 별도 설명 드리지 않습니다.)

팁은 하나 드릴 수 있습니다.

node.js 는 파일질라 처럼 자동 업데이트가 되는 제품이 아니거든요. 그래서 튜토리얼 같은데 보면 node.js 를 업데이트 하려면 설치된걸 uninstall 하고 다시 설치해라 라고 말하는데, 저는 좀더 간편한 방법을 알고 있습니다.

프로그램 추가/제어 페이지로 가셔서 node.js 를 우클릭 합니다.

그리고 repair 를 누릅니다. 고장나지 않았지만, 고장났으니 고치라고 하는거죠. 그럼 node.js 에서 알아서 최신 파일을 다운받아줍니다. 고로 자동업데이트가 됩니다. ㅋㅋㅋㅋ (저혼자 생각해낸 방식입니다. 인터넷에 오늘 처음 공개되는…. 왜 이런짓을 하냐구요? 제가 게으르니까요.)

암튼 이제 node.js 가 깔리셨고 command prompt 창에서 명령을 실행해서 SASS 를 설치하실 준비가 다 되신 상태이십니다.

command prompt 창을 여시고 다음과 같은 명령문을 실행하세요.

npm install -g node-sass

여기서 -g 는 global 설치를 말합니다. 그러니까 어느 폴더에서도 SASS 가 작동되게 설치를 하는거죠.

node-sass 페이지에 보면

npm install node-sass

이렇게 하라고 되어 있는데, 이건 SASS 가 설치되는 폴더에서만 작동하게 되기 때문에.. 뭐랄까 좀 제약적인 설치가 되어버리는 거죠.

암튼 편하신쪽으로 설치하시구요. 제대로 설치가 되었다면 이런 화면이 보이실 겁니다.

그리고 이렇게 폴더에 설치되어 있는 SASS 를 확인할 수 있습니다.

사실 SASS 설치하는게 중요한게 아니죠. css 로 변환(컴파일링) 하는게 중요한거지…

---

SASS (SCSS) 컴파일 하기

어려운 부분은 위에서 다 끝났습니다. 이제 부터 아주 쉽습니다. 왜냐하면 SASS compiling 을 해주는 도구들은 아주 많거든요. 그러니 조금만 더 힘을 내서 SASS 구축의 끝을 보세요!!

1. npm 내에서 컴파일 하기 (미국에서 일하실거 아닌 분들은 1번은 건너 띄고 읽으시면 됩니다.)

일단 현업/Agile 개발환경이신 분들을 위해 (요즘 2-3년 사이 미국내 거의 모든 플젝들이 agile development 라서 혹시 미국에서 협업으로 뛰셔야 하는 분이 계실지도 몰라) npm 내에서 SASS 를 grunt/gulp 없이 compile 하는 방식을 알려드립니다.

일단 저 같은 경우는, 제가 직접 package.json 을 작성해서 SCSS compiling 을 npm 내에서 합니다. 오래전에는 다들 이렇게 했었습니다.

그리고 고맙게도 어느 개발자 분 (이름이 Tyler Reckart 입니다) 이 자신의 compile build 를 여기에 공개하셨습니다.

https://www.npmjs.com/package/scss-compile

이분의 build 를 사용하신다면 다시 command prompt 에서

npm install -g scss-compile

위 명령어를 내리시면 SCSS 컴파일러가 설치됩니다.

일단 하셔야 하는 작업은 설치 후, 이분의 package.json 파일을 여세요.

12번째 줄에 보시면

assets/scss 에 들어 있는 파일을 assets/css 로 컴파일 하라는 명령문 보이시나요?

저 같은 경우는 이분하고 약간 폴더 형식이 다릅니다.

저는 제 root 에 asset 이라는 폴더가 있고, 그 하위 폴더에 img, scss, css, js 이런식으로 파일들이 정리되어 들어가 있거든요.

그래서 이 명령문을 제 폴더 형식에 맞겠금 바꿔줘야 합니다.

“scss-compile”: “node-sass -rw asset/scss -o asset/css”,

저같은 경우 이분의 compile build 를 사용한다면 이럼 땡. 다 된겁니다. ㅎㅎㅎ

css 로 컴파일 하라는 명령실행은

npm run scss-compile

개간단하죠? ㅇㅈ? ㅋㅋㅋ

오케이

*grunt 나 gulp 로 컴파일 하는 방식은 소개하지 않습니다. 일단 구글링 하시면 영문으로 많이 소개되어 있고, 요즘 grunt 나 gulp 를 버리는 플젝팀들이 많아서요. 전반적으로 그런 추세 입니다.

내가 계속 grunt 나 gulp 를 쓰고 있어야 하나 싶은, 이런 의문이 드시는 분들은 아래글을 읽어보시면 참 좋을 것 같습니다.

https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.nagbn2ft4

https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

이글들을 요약하자면 grunt 나 gulp 는 필요없는 abstraction 이다. 오히려 개발환경을 더 복잡하게 만들고 어지럽힌다, 이런 내용입니다. npm 을 build tool 로 쓰면 grunt 나 gulp 는 필요없다는 거죠.

grunt 나 gulp 는 워드프레스로 치면 관리자 페이지를 정신없게 만드는, 페이지 로딩속도나 느려지게 만드는 필요없는 플러그인들 같은 존재인겁니다.

2. 일반 front-end 개발자 분들에게 적합한 방법 (sublime text, brackets, atom)

a. Sublime Text 3

SassBuilder 플러그인을 설치해서 사용하시면 됩니다.

https://github.com/bnlucas/SassBuilder

세팅은, .sassbuilder-config 파일을 여시고, project_path 하고 css 출력 path 를 본인의 플젝에 맞게 고쳐주시기만 하면 됩니다.
{
“project_path”: “/project/path”,
“output_path”: “/project/path/css”,
“options”: {
“cache”: true,
“debug”: false,
“line-comments”: true,
“line-numbers”: true,
“style”: “nested”
}
}

저도 오래전에 사용했던 플러그인 인데, 이 플러그인의 문제가 이게 Sublime Text 2 에서 까지만 작동했었습니다. 그런데 지금보니 최신버전인 Sublime Text 3 에서도 이제 작동하네요. Good!!

b. Brackets

brackets-sass extension 을 사용하시면 됩니다.

https://github.com/jasonsanjose/brackets-sass

사용방법 동영상 까지 존재하니 설명은 생략합니다. Live-preview 기능까지 있고, 사용하시기 매우 편할 것 같습니다.

c. Atom

sass-autocompile package 를 사용하시면 됩니다.

https://atom.io/packages/sass-autocompile

제가 이글을 시작할때 node-sass 를 설치하는 이유가 컴파일링 때문이라고 했는데, node-sass 를 설치해야 이 sass-autocompile package 를 사용할 수 있기 때문이었습니다. (요즘 Atom 쓰시는 개발자 분들 많으시고 미래에도 이글 보시는 분들 중 Atom 쓰시는 분들이 많이 보실 것 같아서요. ㅎㅎ)

Atom 의 package 가 위 두개 제품보다 훨씬 더 기능이 다양하고 복합적 입니다. 저도 덮어씌우기 기능 때문에 지금 이 package 를 써볼 까 생각 중 입니다. 문제가.. 제가 계속 Atom 을 계속 쓸지 모르겠어서.. (Atom 이 많이 무겁네요? ㅠㅠㅠㅠ)

3. 非 front-end 개발자/취미로 웹개발 하시는 동호가 분들이 사용하실 수 있는 방법

직접 SASS 를 작성하실 일은 없으실 거고, 간혹 거래처나 튜토리얼 파일 같은 걸 다운로드 받았는데 그 플젝 파일에 css 가 포함되어 있지 않고, SASS 나 SCSS 파일밖에 들어 있지 않아서, 이걸 css 로 변환하셔야 하는 경우가 있을지도 모릅니다.

이런 경우 사용하실 수 있는 온라인 변화 도구가 존재합니다.

http://www.sassmeister.com/

마지막으로 번외 도구들:

Codekit, Prepros 등등, 컴파일을 GUI 에서 해주는 프로그램들이 있는데, 솔직히 누가 이런걸 돈주고 사서 쓰는지도 잘 모르겠고, 사용해본적도 없습니다. (복잡해 보여서 그냥 줘도 안쓸 것 같아요. 컴파일 속도도 많이 느려진다고 하더라구요.)

---

글을 쓰다보니 글내용이 상당히 길어졌는데요, 사실 front-end 개발이 워낙 광범위하고 기술도 쉴세 없이 바뀌고 그런 분야라서 어떤 내용 하나도 간략하게 설명하기가 몹시 어렵습니다.

SASS 에 대해 말하자면, 제 사견이지만, overrated 되었다, 과대평가 되었다고 말하고 싶습니다.

앱쪽이 아닌 웹이라면, 정말 대형 플젝이 아닌경우 SASS 가 필요 없습니다. 오히려 postCSS 의 중요성이 더 높다고 생각합니다.

그래서 프리랜서분들, 조그만 플젝 작업하셔야 하는 분들께 말씀드리자면, 너무 SASS(SCSS) 에 대한 강박관념 같은걸 갖지 않으셨으면 좋겠다는 것 입니다. 또 css 경력 좀 있으신 분들에게는 SASS 익히기가 어렵지도 않습니다.

이런 cheat sheet (컨닝페이퍼?) 보시면 그냥 보시는 것 만으로 SASS 가 어떤일을 하는지 쉽게 이해되실거에요.

https://sass-cheatsheet.brunoscopelliti.com/

마지막으로 SASS 설치가 힘들다고 기술나쁜 개발자가 절대 아닌겁니다. 특히 프리랜서분들 중, 이런걸로 괜한 자격지심같은 걸 갖지 않으셨으면 좋겠습니다. 코딩과 개발환경 설치와는 전혀 별개의 문제 입니다. 절대 쪽팔려하실 일이 아닙니다. 아니, 모르면 배우는거죠, 그게 왜 창피한 일입니까?!!

아, 진짜 내가 다 열받네…

이런 개발환경 구축 같은걸로 부심부리는 개발자들이 창피한거고 쪽팔린줄 알아야 하는 겁니다.

힘내세요!!!

아, SASS 는 알겠는데 SCSS 는 또 뭐냐구요? 같은거에요. 거의 같은건데 실제 업무에서 사용되는 SASS 라고 생각하시면 됩니다. (기능이 더 많지만, syntax 는 거의 동일해요. )

끝.

---

p.s. 아주 오래전 냑에서 제 글을 읽었던 분이 혹시 계실까 싶어 (여기에 댓글 다실까 무서워서) 미리 실토합니다. “제가 SASS 망했다. SASS 로 시작한걸 너무 후회한다. 왜 SASS 에 발을 담궜는지 모르겠다. LESS 가 대세다. 나는 SASS 쓰지만 LESS 를 써야했다” 이런 댓글을 쓴 적이 있습니다. 부인 안합니다. 그렇게 글을 썼던 이유는,… 제가 쓴 답글이 어느 분에게 썼던 답글인지 다시 한번 보시길.

그렇습니다. 아무런 이유도 없이 저 씹고 다니는 그분 엿먹으라고 그렇게 낚시글을 썼던건지도 모르겠습니다. 그리고 공교롭게도, 참 불행하게도, 그 분은 LESS 를 시작하셨던… (지금 기억나는게 제가 글 쓸때 영어 섞어 쓴다고 까시는 분들도 계셨는데, 하… 한국말 잘 못해서 영어 섞어 쓰는건데 그걸로 저를 까더라구요. 정말 성격 이상한 분들 많은듯.)

낚시글이었는지 아니었는지, 지금 기억이 잘 나지 않는데, 암튼 제 발언은 잘못된 내용이었… 과거는 꺼내지 말고 덮어주셨으면 좋겠…. ^^;;;