Sass 를 이용한 CSS 작성과 Gulp 를 이용한 일괄처리에 대한 가이드 (1)

                                   

Sass 와 Gulp 에 대해서 설명이 잘 된 한국어 블로그가 많이 없는것 같다. 

이전 회사에서 좋은 지식들을 많이 배울 기회가 있어서, Sass 와 Gulp, 나아가 Grid system을 sass를 이용해 활용 하는 법 등

내가 아는 정보들을 공유해 볼까 함.

오늘은 시작하는 글이니까, 몇가지 기본적인 단어들의 정의나 기본적인 개념을 파악하고 가보자.

우선 Sass 나 Less 라고 하는건 CSS Preprocessor (전처리기) 라고 하는 CSS 의 확장언어 라고 이야기 할 수 있다.

SASS (http://sass-lang.com/) 는 Syntactically Awesome StyleSheets 의 약자로 한국말로 구지 바꾸자면 구문적으로 놀라운 스타일시트 라고 하겠다.

CSS에 If 나 For 문같은 반복문과 조건문까지 사용이 가능해진다. 이게 얼마나 큰 편의를 제공하는지는 상상력을 품는만큼 구현할 수 있으니 미리 구체적으로 설명은 안해야지.

Mixin 을 사용해서 미리 만들어둔 스타일을 한줄로 불러올 수 도 있다.

Gulp 까지 사용한다면, Sass파일을 수정하고 저장하면 브라우저가 이를 인식하고 자동으로 리프레쉬까지 해준다. !! 놀랍다.

LESS는 SASS와 비슷하지만 구문적으로 약간 다르다. 나는 주로 SASS를 사용해왔고, 가끔 LESS로 컴파일된 프로젝트를 할 때 사용해봤는데 큰 차이는 없다.

추가-내가 정말 존경하는 사이트 오픈튜토리얼 'https://opentutorials.org/course/277/1748' 의 Less 글타래를 읽는게 Less 를 시작하는 이에게는 더 도움될것이다)

사실 그럴 수 밖에 없는것이 기본적으로 CSS를 그대로 갖다 써도 문제 없이 돌아가기 때문에, 초보자들의 접근성이 매우 좋다.

SASS만 배우는것은 CSS 만 할줄 안다면 누구나 쉽게 배울 수 있고, 이해도 금방 할 수 있다. 

Gulp 나 Guard 혹은 Grunt 를 이용한 일괄처리 프로세스가 함께 했을때 Sass 가 빛을 내며, 보통의 퍼블리셔나 프론트엔드 개발자에서 한단계 전진 할 수 있다!

앞으로 작성하게 될 글들은 맥 환경에서 진행될 예정이지만, 윈도우 환경에서도 큰 차이는 없다. 

Sass는 Ruby가 먼저 설치되어 있어야한다. 맥이라면 기본적으로 설치 되어 있을테고, 윈도우라면 루비를 설치해두자 (http://rubyinstaller.org/) 

아주 간혹... 거의 없을거라 예상하지만 리눅스 환경에서 작업한다면, 루비를 따로 설치해두자. 

RVM(Ruby Version Manager) - https://rvm.io/ 를 매우 많이 사용하게 될것이다.

나는 사실 윈도우환경에서 작업을 거의 하지 않아 윈도우 환경의 설명은 부족할 수 도 있을것 같다. 

사실 처음 이런류의 글을 써 보기에 지루하거나, 설명이 어렵거나, 읽기가 싫은 글이 될까봐 걱정이다. 

계속 글을 부지런히 작성할 수 있을지도 걱정이고.. 

열심히 해봐야지.