SCSS/SASS(CSS Preprocessor) & Sass install

SASS (Syntactically Awesome StyleSheets)

Sass는 css전처리기로써 css 파일 중간에 위치하는 하나의 계층입니다.

전처리기란 웹 브라우저는 프로세서(Processor)로서 웹 데이터(HTML, CSS, JS 등)를 다운로드 받아 해석하여 화면에 해석된 데이터를 랜더링됩니다. Sass, LESS 등 ‘CSS 확장 언어’를 활용할 경우, 웹 브라우저에서 해석되기 전에 CSS로 변경되는 과정이 필요합니다. 이를 ‘브라우저에서 해석되기 전에 프로세싱한다’고 해서 프리프로세싱(Pre-Processing)한다고 부릅니다.

Sass는 보다 간결하고 격식을 갖춘 css 문법을 제공하며, 스타일시트를 쉽게 관리할 수 있는 다양한 기능을 구현합니다.” 라고 정의하고 있다.

다시 말해서, 

“Sass는 css를 만들어주는 언어로 자바스크립트처럼 특정 속성(ex. color, margin, width … )의 값(ex. #000, 3px, 420px … )을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 등의 기능을 제공해준다.”

그렇다면 네이티브인 css 가 아닌 왜 sass 인가...??? 아니라면 css만으로 충분한가?!

하드 코딩을 하다보면 사실 html 마크업 보다는 css를 작성하는데 훨씬 더 많은 시간이 걸립니다. 

모든 레이아웃과 디자인 요소를 CSS 로 제어해야 하기 때문이다. 그러다보면 여러번 반복되는 속성들을 사용하기도 하고,  다른 곳에서 작성했던 속성을 다시 또 작성하는 등 번거로운 일들이 빈번히 발생한다.

예를 들어, CSS3 에서 새로 나온 속성들에는 벤더 프리픽스를 붙여줘야되는 번거로움도 있을 수 있고 반응형 웹을 제작할 시 미디어 쿼리까지 사용하고 게시판 같은 자잘한 속성을 많이 작성해야 하는 곳에선 피로도가 증가하기 마련입니다.

css module 4에서는 mixin, 함수, 변수가 있지만 아직까지는 먼 미래의 이야기입니다. 

하지만 당장 사용할 수 있는 테크닉이 sass, less, stylus 등이 있습니다.  

이러한 테크닉은 css의 미래이자 css의 확장 언어입니다.  

더이상 css 노가다 코딩은 접어두고 sass 를 사용하여 생산적인 코딩을 하도록 합시다.

이제 css 도 모듈관리 시대입니다!!!

먼저 Sass 를 설치해 보도록 하자.

SASS 설치하기

Sass는 Ruby라는 프로그래밍 언어로 만들어졌기 때문에 자신의 컴퓨터에서 Ruby언어를 사용할 수 있는 환경이 제공되어야지만 Sass를 사용할 수 있습니다.

그럼 Sass를 설치하기에 앞서 Ruby를 설치해 보도록 하자.

[note] - Mac OS는 Ruby가 기본적으로 설치가 되어 있어서 따로 번거롭게 설치할 필요가 없습니다.

현재 Mac을 사용하고 있기는 하지만 프로젝트 환경상 window에서 작업하는 경우를 대비하여 WINDOW 환경을 기준으로 포스팅해 봅니다.

window에는 Ruby가 설치되어 있지 않으므로 아래의 다운로드 링크에서 ruby를 설치한다.

루비 설치하기 : ruby

다운로드 링크들을 살펴보면 여러 링크가 있는데 그 중 맨 상단의 

• Ruby 2.1.5    이 링크를 클릭하여 설치를 진행한다.

설치를 진행하다 보면 다음과 같은 화면이 나왔을때

Add Ruby executables to your PATH를 체크합니다.

PATH설정을 따로 할 필요없이 Ruby를 설치하기 위해서 체크하는 항목입니다. install을 누른 후 계속 진행하여 설치를 마칩니다.

Install 설치가 끝나면 ruby의 설치 여부를 확인해 보기 위해서 cmd(명령어)창에서 다음의 명령어로 ruby의 설치 유무를 확인 할 수가 있습니다.

cli

$ ruby --version # 루비버전 확인 (약어 -v)

ruby가 설치된 것을 확인 한 후에 다음의 명령어로 sass 설치를 진행합니다.

cli

$ gem install sass #sass 설치 or gem i sass

Gem이란 Ruby에서 지원하는 패키지 시스템으로서 이 명령어를 사용하여 필요한 프로그램,모듈 등을 다운, 설치한다.

다시 말해서, Gem 은 gem 파일로 만든 스크립트를 패키징(포장)해 둔 것으로써 라이브러리,엔진 등을 바로 다운/설치하거나 지우는 등의 일을 하는 도구입니다.

이렇게 명령프롬프트를 통해서 Sass를 설치하듯이 Sass를 css파일로 변환하기 위해서 cmd 창에서 명령어를 사용하여 변환한다.

명령어를 통해 sass를 css로 변환하려면 명령어를 쳐서 해야 하지만 명령어 기반이 싫은 사람들에게 window에서 scout라는 converter가 있으니 찾아보시길... 하지만 비추천!!!

그리고 혹시 설치를 진행하다가 아래와 같은 에러가 발생한다면

다음의 명령어를 입력하고 

cli

$ gem source -r https://rubygems.org/
$ gem source -a http://rubygems.org/

다시 Sass를 설치하면 정상적으로 설치가 될 것입니다.

그리고 “gem install sass” 명령어를 입력 sass가 설치되었는지를 확인 하기 위해 cmd에서 sass -v  를 입력하여 version이 나온다면 제대로 설치된 것입니다.

이제 Sass 사용을 위한 환경 설정이 끝났습니다.

Ruby 버번 확인 및 Gem을 활용한 Sass 설치/제거 명령어

cli

$ ruby --version # ruby -v

$ gem -v
$ gem list

$ gem update --system # 시스템 업데이트

$ gem install sass   # gem i sass 설치
$ gem i sass@버전명시   # 버전 명시하여 설치

$ gem list sass      # 설치 목록 확인 (sass list 확인)
$ gem uninstall sass # 제거

Sass Compile 명령어

cli

 sass -h # 도움말 보기

$ sass [options] [INPUT] [OUTPUT] # 컴파일 (1회)

$ sass --watch [INPUT]:[OUTPUT] # sass -w [INPUT]:[OUTPUT], 지속적 관찰

$ sass -w -t compact [INPUT]:[OUTPUT] # nested expanded compact compressed

Ruby Gem 설치 오류 문제 발생 시, 해결 방법

cli

$ gem source --add https://s3.amazonaws.com/production.s3.rubygems.org/
$ gem source --remove https://rubygems.org/

Windows 환경에서 한글(CP949) 오류 발생 시, 언어 인코딩 UTF-8로 설정

cli

$ sass -E utf-8 sass/style.scss css/style.css # 인코딩 옵션 설정 -E utf-8

$ sass --watch -E UTF-8 --style compressed sass:css
$ sass -w -E UTF-8 -t compressed sass:css

Sass 기타 명령어

cli

$ sass-convert -h # sass <=> scss 변환
$ sass-convert sass/style.scss scss/style.sass

SASS Watch 시 유의사항

cli

// watch 를 하지 않을 경우 :(콜론) 사용하지 않습니다.

$ sass compact sass/style.scss css/style.css

// watch 를 할 경우는 :(콜론)을 사용해야 합니다.
$ sass --style compact sass/style.scss:css/style.css
$ sass -w -t compact sass:css

파일을 watch 하지않고 컴파일 할 경우에는 :(콜론) 을 사용하지 않습니다.

Sass Workflow (작업흐름)

프로젝트를 진행함에 있어 SASS를 사용한다면 작업자는 .scss 파일에서만 작성할 것이기 때문에 .css 파일을 수정하지 않아도 된다. 

반드시 명심해야 할 것은 .scss 파일에서만 작업을 진행해야만 한다. 

그 이유는 만약 작업자가 .css 파일에서 코드를 변경한 것은 .scss에 적용되지 않기 때문이다.

.css 파일에서 변경한 코드는 .scss 파일을 업데이트하고 컴파일하는 그 순간 새로운 내용으로 덮어쓰여 날아갈 것이기 때문이다. 

.scss 파일에만 신경쓰고 .css 의 출력파일은 이제부터 잊어라.

혹여, .css 파일을 .scss 파일로 변경해주는 사이트가 존재하지만 작업중인 프로젝트에서는 이용하지 말아야한다.

본인이 원하는대로 .scss 파일로 변경되지 않을 것이기 때문이다.

만약에 유지보수를 위해 처음 프로젝트에 투입되었고 기존의 .css 파일로 유지보수를 하고 싶지 않고 sass를 도입하여 사용하고 싶다면 그때 기존의 css 를 sass로 변환한 후에 진행하면 될 듯하다.

이 경우에도 앞으로 계속 .scss 파일에만 신경써서 작업해야 한다.

※ CSS로 프로젝트가 종료된 상황에서 Sass 를 도입하는 경우에 사용할 것을 권장

CSS ↔ Sass/Scss 파일 변환 온라인 도구 

Sass ↔ Scss 파일 변환 온라인 도구

다음 포스팅에서 Sass를 본격적으로 사용해 보자.

[출처] : http://wit.nts-corp.com/2015/01/09/2936

Jaehee's WebClub