SASS (SCSS) 컴파일 하는 방법
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
npm -v
npm list -g
node.js 가 설치가 되어 있지 않으면 SASS 를 설치할 수 없으니 설치가 되어 있지 않다면, 일단 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 로 변환하셔야 하는 경우가 있을지도 모릅니다.
이런 경우 사용하실 수 있는 온라인 변화 도구가 존재합니다.
마지막으로 번외 도구들:
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 를 시작하셨던… (지금 기억나는게 제가 글 쓸때 영어 섞어 쓴다고 까시는 분들도 계셨는데, 하… 한국말 잘 못해서 영어 섞어 쓰는건데 그걸로 저를 까더라구요. 정말 성격 이상한 분들 많은듯.)
낚시글이었는지 아니었는지, 지금 기억이 잘 나지 않는데, 암튼 제 발언은 잘못된 내용이었… 과거는 꺼내지 말고 덮어주셨으면 좋겠…. ^^;;;
Tags: css, npm, sass, scss, 변환, 컴파일카테고리: CSS, Web Development
11 Comments
요새는 libsass도 많이 쓰더라고요
저도 예전에는 그냥 터미널 띄우고 컴파일 시켜줬는데 libsass 쓰니 비교도 안되게 빠르던…
특히 SCSS파일이 막 20몇개 이렇게 되면 엄청 차이 납니다. (게다가 사양도 많이 탑니다. ㄷㄷ)
그래서 제가 본글에 node-sass 를 설치하는 방법을 소개했잖아요.
“Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.”
node-sass 가 libsass wrapper 에요.
ㅎㅎㅎㅎ
아하! 그렇군요
저는 npm이나 node.js를 안쓰다 보니…
OS X는 ruby 가 들어있어서 그냥
gem install sass
이렇게 치기만 하니까 알아서 깔리더군요 ㅎㅎ;;
지금 맥북 쓰신다고 자랑질 하시나요?
맥북 부심 쩔구요.
돈없어서 윈도우 쓰는 거지는 그냥 울지요. ㅠㅠㅠㅠ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그런데 진지빨고 말씀드리자면 원래 ruby 기반 SASS 가 속도가 느려서 자스 기반 LESS 가 잠시나마 반짝 했던거구요, 지금은 ruby 기반 SASS 는 안쓰고, 자스기반 SASS (node-sass) 가 쓰입니다.
그래서 지금은 SASS 가 LESS 보다 더 빠릅니다. 이게 LESS 가 완전 망하는데 결정적인 작용을 했죠.
부트스트랩이 LESS 기반이라 부트스트랩이 망해가니까 어떻게 해서든 부트스트랩을 살려보려고 지금 개발중인 부트스트랩 4 는 SASS 기반으로 옮겨서 개발하고 있습니다.
물론 그래봐야 부트스트랩은 극혐이지만.
이래서 일각에서는 그럽니다. 부트스트랩4 야 말로 왜 부트스트랩을 쓰지 말아야 하는지를 잘 보여주고 있다고.
무슨말인지, Estoque 님은 이해하셨을테니까 부연설명 생략.
애초에 저는 LESS 써본적이 없지만 예전에 SASS 배울까 LESS 배울까 고민하던 차에 css-tricks나 smashing magazine 그리고 stack overflow의 글을 쭉 읽어본결과 그냥 sass가 낫겠다 싶어서 처음부터 sass를 배웠습니다.
그런데 신기하게도 한국개발자들은 LESS가 부트스트랩기반이라서 좋고, LESS파일 그대로 서버에 올려서 js로 변환해서 쓸 수 있는 점을 강조하더군요
‘뭐 니가 그렇다면 그런거겠지’ 라고 생각하고 그냥 SASS 쓰고 있습니다. -_- ㅋㅋ
초창기에는 그냥 ruby로 컴파일 했는데 대안을 찾다보니 osx는 유료 앱이 쓸만한게 많아서 그 중에서 codekit 골라서 잘 쓰고 있습니다. 오토 리프레시도 되고 깨알같은 기능이 많더라고요
네. 그래서 노선을 잘 타야되요. 오래전에 jQuery/Prototype 도 같은 상황이었죠. 딱 봐도 jQuery 가 대세가 될게 보이는데, Protoype 고집하던 개발자들은 망했으…
LESS/SASS 는 단지 그 당시 LESS 설치가 더 쉽다는거 하나 였는데, 로직을 보면 SASS 가 훨씬더 우월해서, 결국 SASS 가 대세가 될걸 어렵지 않게 예상할 수 있었습니다.
저 부터도 if/else 도 못쓰고, loop 도 못하는 LESS 의 이용가치가 뭐가 있는지 질문하게 되더라구요.
안녕하세요. 글 정말 잘읽었습니다. 많은 도움이 되었어요. 그런데 한가지 궁금한 것이 SassBuilder가 sublime text3 패키지에서는 바로 검색이 안되서요, 다른걸 설치해도 되는지 궁금합니다.
물론 다른 패키지를 설치하셔도 되죠. 단지 sublime text3 에서 잘 작동되는지 설치전 미리 확인해 보세요.
제가 알려드렸던 SassBuilder 가 가장 보편적으로 많이 사용되고, sublime text3 에서도 잘 작동되는 패키지 입니다.
https://packagecontrol.io/packages/SassBuilder
지금까지 검색했던 설치법 중에서 제일 성의있고 자세하게 써주셨네요 너무 감사드려요~ css가 너무 반복되는 부분이 많아서 sass를 검색하고 있었는데 완젼 정독해서 읽었어요~ 앞으로도 더 많은 글들 써주세요~ 힘내십시용~~
node-sass를 설치했는데 d드라이브에 -w이 안되네요
cmd에서
node-sass -w sass -o css -c 명령어로 엔터를 누르면
오류는 안나는데 아무반응이 없네요… https://uploads.disquscdn.com/images/a78d8273b2cf029c33a8f8c2c1add16edbe381dee6175d40dd77f7e82909a542.png
sass파일을 수정을 해도 프롬프트에서 아무 반응을 안합니다.
왜그런걸까요?
제가 의문했던 점을 시원하게 긁어주시네요.
less든 sass든 그냥 css든 자기가 편하고 협업자와 소통하기 수월한게 중요하죠,
최신의 기술이 최선의 기술이라 착각하지 말아야 한다고 늘 생각합니다.
그런 점에서 저와 의견을 같이 하시네요.
좋은 글 감사합니다. ^___^