Sass 를 이용한 CSS 작성과 Gulp 를 이용한 일괄처리에 대한 가이드 (2) - Sass 설치 및 실행

드디어, 두번째 가이드를 작성하게 되네. 

1년이 넘는 시간동안 Js 프론트엔드 기술에 많은 발전이 있었고, 

Guard / Grunt 는 점점 사용을 덜하게되고, Gulp / Webpack 의 사용은 점점 늘어나는것 같다.

차후에는 웹팩을 이용한 일괄처리도 다루어 봐야겠다.

먼저 오늘은 Sass 를 컴파일하기 위한 환경설정을 해보려고 한다. 

아주간단하므로 스크린샷과 함께 빠르게 보고 넘어가자.

gem install sass

엄청간단하지? 맥에는 기본적으로 루비가 설치되있기 때문에 gem 을 그대로 갖다 쓰면된다.!

바로 실행까지 해보자

sass --watch sass:style

watch 라는 명령어를 통해 sass 는 sass 폴더의 변경내용을 감시하고있다가 scss 파일이 변경되면 즉시 css 폴더에 css 파일을 아웃풋한다.

여기까지는 누구나 아주 쉽게 접근가능한, sass 의 시작점이다. 

sass 의 문법이나 사용법 같은건 어렵지 않으니 따로 설명하지는 않고, http://www.sass-lang.com/ 여기를 참고하기 바란다. 

SASS 문법자체는 굉장히 쉽다. 어렵다면 혹은 누군가의 요구가 있다면 이것도 한번 다뤄 봐야지..

아무튼 우리는 Gulp 를 활용하는게 목표니까 이런식으로 컴파일 하진 않을꺼다 Gulp 를 부려먹을꺼다!

그러니까 Gulp 를 설치하자 이제. 아 그건 좀 길어질것 같으니까 3편으로 넘기자. 

아주 오랜만에 글을 쓰는거라, 누군가에겐 죄송한 마음이 들기도 하고, 나 스스로에게 기특한 마음도 들고, 게으름을 구박하고싶기도 하다.

3편은 언제 쓸려나 ㅋㅋㅋ