SASS (SCSS) 컴파일 하는 방법

§

scss_banner

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 창을 띄우세요.

cmd_%eb%9d%84%ec%9a%b0%ea%b8%b0

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

node -v

npm -v

npm list -g

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

node.js 설치 =>고고씽

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

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

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

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

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

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

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

npm install -g node-sass

sass_%ec%84%a4%ec%b9%981

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

node-sass 페이지에 보면

npm install node-sass

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

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

sass_%ec%84%a4%ec%b9%982

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

참고삼아 말씀드리자면, 인터넷이 연결되는 서버가 내 컴에 깔려 있는 경우, 보안에 상당히 많은 신경을 쓰셔야 합니다.
참고삼아 말씀드리자면, 인터넷이 연결되는 서버가 내 컴에 깔려 있는 경우, 보안에 상당히 많은 신경을 쓰셔야 합니다. 참고삼아 말씀드리자면, 인터넷이 연결되는 서버가 내 컴에 깔려 있는 경우, 보안에 상당히 많은 신경을 쓰셔야 합니다.

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


SASS (SCSS) 컴파일 하기

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

npm

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 파일을 여세요.

scss_compile1

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

ide

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 로 변환하셔야 하는 경우가 있을지도 모릅니다.

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

online_sass_compiler
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 를 시작하셨던… (지금 기억나는게 제가 글 쓸때 영어 섞어 쓴다고 까시는 분들도 계셨는데, 하… 한국말 잘 못해서 영어 섞어 쓰는건데 그걸로 저를 까더라구요. 정말 성격 이상한 분들 많은듯.)

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

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , , , ,

카테고리: ,

Ω

11 Comments

  • Estoque says:

    요새는 libsass도 많이 쓰더라고요

    저도 예전에는 그냥 터미널 띄우고 컴파일 시켜줬는데 libsass 쓰니 비교도 안되게 빠르던…

    특히 SCSS파일이 막 20몇개 이렇게 되면 엄청 차이 납니다. (게다가 사양도 많이 탑니다. ㄷㄷ)

    • Matthew says:

      그래서 제가 본글에 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 에요.

      ㅎㅎㅎㅎ

      • Estoque says:

        아하! 그렇군요

        저는 npm이나 node.js를 안쓰다 보니…

        OS X는 ruby 가 들어있어서 그냥

        gem install sass

        이렇게 치기만 하니까 알아서 깔리더군요 ㅎㅎ;;

        • Matthew says:

          지금 맥북 쓰신다고 자랑질 하시나요?

          맥북 부심 쩔구요.

          돈없어서 윈도우 쓰는 거지는 그냥 울지요. ㅠㅠㅠㅠ

          ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

          그런데 진지빨고 말씀드리자면 원래 ruby 기반 SASS 가 속도가 느려서 자스 기반 LESS 가 잠시나마 반짝 했던거구요, 지금은 ruby 기반 SASS 는 안쓰고, 자스기반 SASS (node-sass) 가 쓰입니다.

          그래서 지금은 SASS 가 LESS 보다 더 빠릅니다. 이게 LESS 가 완전 망하는데 결정적인 작용을 했죠.

          부트스트랩이 LESS 기반이라 부트스트랩이 망해가니까 어떻게 해서든 부트스트랩을 살려보려고 지금 개발중인 부트스트랩 4 는 SASS 기반으로 옮겨서 개발하고 있습니다.

          물론 그래봐야 부트스트랩은 극혐이지만.

          이래서 일각에서는 그럽니다. 부트스트랩4 야 말로 왜 부트스트랩을 쓰지 말아야 하는지를 잘 보여주고 있다고.

          무슨말인지, Estoque 님은 이해하셨을테니까 부연설명 생략.

          • Estoque says:

            애초에 저는 LESS 써본적이 없지만 예전에 SASS 배울까 LESS 배울까 고민하던 차에 css-tricks나 smashing magazine 그리고 stack overflow의 글을 쭉 읽어본결과 그냥 sass가 낫겠다 싶어서 처음부터 sass를 배웠습니다.

            그런데 신기하게도 한국개발자들은 LESS가 부트스트랩기반이라서 좋고, LESS파일 그대로 서버에 올려서 js로 변환해서 쓸 수 있는 점을 강조하더군요

            ‘뭐 니가 그렇다면 그런거겠지’ 라고 생각하고 그냥 SASS 쓰고 있습니다. -_- ㅋㅋ

            초창기에는 그냥 ruby로 컴파일 했는데 대안을 찾다보니 osx는 유료 앱이 쓸만한게 많아서 그 중에서 codekit 골라서 잘 쓰고 있습니다. 오토 리프레시도 되고 깨알같은 기능이 많더라고요

          • Matthew says:

            네. 그래서 노선을 잘 타야되요. 오래전에 jQuery/Prototype 도 같은 상황이었죠. 딱 봐도 jQuery 가 대세가 될게 보이는데, Protoype 고집하던 개발자들은 망했으…

            LESS/SASS 는 단지 그 당시 LESS 설치가 더 쉽다는거 하나 였는데, 로직을 보면 SASS 가 훨씬더 우월해서, 결국 SASS 가 대세가 될걸 어렵지 않게 예상할 수 있었습니다.

            저 부터도 if/else 도 못쓰고, loop 도 못하는 LESS 의 이용가치가 뭐가 있는지 질문하게 되더라구요.

  • shinyooon says:

    안녕하세요. 글 정말 잘읽었습니다. 많은 도움이 되었어요. 그런데 한가지 궁금한 것이 SassBuilder가 sublime text3 패키지에서는 바로 검색이 안되서요, 다른걸 설치해도 되는지 궁금합니다.

  • 크리스탈 says:

    지금까지 검색했던 설치법 중에서 제일 성의있고 자세하게 써주셨네요 너무 감사드려요~ css가 너무 반복되는 부분이 많아서 sass를 검색하고 있었는데 완젼 정독해서 읽었어요~ 앞으로도 더 많은 글들 써주세요~ 힘내십시용~~

  • 함성재 says:

    node-sass를 설치했는데 d드라이브에 -w이 안되네요
    cmd에서
    node-sass -w sass -o css -c 명령어로 엔터를 누르면
    오류는 안나는데 아무반응이 없네요… https://uploads.disquscdn.com/images/a78d8273b2cf029c33a8f8c2c1add16edbe381dee6175d40dd77f7e82909a542.png

    sass파일을 수정을 해도 프롬프트에서 아무 반응을 안합니다.
    왜그런걸까요?

  • Songmi Kim says:

    제가 의문했던 점을 시원하게 긁어주시네요.
    less든 sass든 그냥 css든 자기가 편하고 협업자와 소통하기 수월한게 중요하죠,

    최신의 기술이 최선의 기술이라 착각하지 말아야 한다고 늘 생각합니다.
    그런 점에서 저와 의견을 같이 하시네요.

    좋은 글 감사합니다. ^___^

Leave a Reply

Your email address will not be published. Required fields are marked *