Sass(SCSS) 시작하기

🤔 Sass(SCSS)란?

"Sass"는 문서의 구조를 깔끔하고 효율적으로 코드를 작성할 수 있게 해주는 CSS 상위에 있는 메타언어입니다.

🔎 Sass / SCSS 차이

Sass와 SCSS의 핵심은 같지만 가장 큰 차이점은 {}(중괄호)와 ;(세미콜론)를 쓰고 안 쓰고 차이입니다.
이 글에서는 SCSS로 작성될 예정입니다.

// Sass
#wrap 
  color: red

 

// SCSS
#wrap {
  color: red;
}

 

📝 설치하기

SCSS를 설치하는 방법으로는 2가지가 있습니다.

SCSS 컴파일 형식
nested : 뎁스별로 구분해서 컴파일
compact : 요소에 스타일이 속성을 한 줄씩 정렬해서 컴파일
expanded : 요소에 모든 스타일을 한 줄에 컴파일
compressed : 모든 요소를 공백 없이 컴파일

• Node.js
  • 장점: 컴파일 속도가 빠르다.
  • 단점: compact 형식으로 변환 시, 코드마다 줄 바꿈이 돼서 컴파일된다.

// CSS
/* Node Compact 방식 */
#wrap {color: red;}

#wrap div {font-weight: bold;}

#wrap div span {font-size: 16px;}

#container {color: black;}

#container div {font-weight: normal;}

• Ruby
  • 장점: compact 형식으로 변환 시, SCSS에서 줄바꿈 설정한 그대로 컴파일된다.
  • 단점: 컴파일 속도가 느리다.

// CSS
/* Ruby Compact 방식 */
#wrap {color: red;}
#wrap div {font-weight: bold;}
#wrap div span {font-size: 16px;}

#container {color: black;}
#container div {font-weight: normal;}

compact 형식을 장단점으로 사용한 이유는 CSS 한 줄씩 줄 바꿈을 하여 작성한다면 나중에 코드의 양이 방대해져서 가독성을 떨어지기 때문입니다. (라는 개인적인 생각입니다...)

그러므로 저는 compact 형식의 컴파일을 원하기 때문에 Ruby를 이용하겠습니다.

💎 Ruby를 이용해 SCSS 설치하기

Ruby 다운로드 페이지에서 Ruby+Devkit 2.x(버전)을 다운 받습니다.

여기서 Path 설정을 꼭 해줍니다.

설치가 완료된 후, 명령 프롬프트(cmd)를 실행한 후 아래 명령어를 입력해줍니다.

gem install sass

명령어

컴파일 방법 sass input.scss output.css

compact 형식으로 컴파일
sass --style compact input.scss out.css

Map 파일 제외하고 컴파일
sass --sourcemap=none input.scss output.css

자동 컴파일 방법
sass --watch input.scss:output.css

자동으로 Map 파일 제외하고 컴파일
sass --watch --sourcemap=none input.scss:output.css

자동으로 compact 형식으로 컴파일
sass --watch --style compact input.scss

자동으로 Map 파일 제외하고 compact 형식으로 컴파일
sass --watch --sourcemap=none --style compact input.scss