Sass 사용법 및 Sass 문법 공부 방법 정리

프론트엔드 프로젝트를 하다 보면 복잡하고 방대한 양의 CSS 코드를 어떻게 유지 보수할까 하는 고민에 빠진다. Sass로 CSS를 관리해야겠다는 생각은 오래전부터 하고 있었는데, 그동안 프레임워크 공부에 빠져 있다 보니 Sass 공부를 계속 미뤄왔다. 그러다 이번에 제대로 Sass 사용법 및 Sacs 문법을 독파하자는 목표를 세웠고 그 내용을 정리해봤다.

1. Sass css 차이

2. Sass를 사용하는 이유

3. Sass 문법 종류

4. Sass 출력 스타일

5. Sass 주석

6. Sass 변수

7. Sass 문법을 더 공부하려면?

8. Sass 참고 URL 모음

1. Sass CSS 차이?

먼저 개념부터 잡고 가자. Sass에 대해 잘 모르는 사람은 Sass와 CSS가 어떤 차이가 있는지 묻는다. 그런데 엄밀히 말하면 둘은 비교할 수 있는 개념이 아니다.

Sass는 Syntactically Awesome Style Sheets의 약자로 해석하자면 "문법적으로 훌륭한 스타일 시트"이다. CSS도 스타일 시트인데 그러면 Sass도 같은 역할을 하는 건가? 라고 생각할 수 있지만 그렇지 않다. 아래 그림을 보자.

<출처 : Udemy CSS에 날개를 달아주는 Sass(SCSS) 자료>

이 그림은 이번에 Sass를 공부하면서 들었던 "CSS에 날개를 달아주는 Sass(SCSS)"라는 강의의 한 장면이다. 이 강의는 Devsigner로 활동하는 김정민 개발자의 Sass 강의로 VS Code를 중심으로 진행되었다.

위 그림에서 보듯이 .scss 파일은 Sass 컴파일러를 통해 .css 파일로 컴파일 된다. 즉, Sass는 CSS를 만들기 위한 도구인 것이다. 그래서 다른 말로 Sass를 CSS의 Pre-compiler(=전처리기)라고도 한다. 

Sass compiler에는 여러 종류가 있다. 주로 Node.js NPM 또는 Ruby Gem을 사용하는데 이번 강의에서는 VS Code용 Live Sass Compiler를 사용했다. NPM이나 Gem을 잘 다룬다면 다른 Sass 컴파일러를 사용해도 된다.

2. Sass를 사용하는 이유

잠시 Sass를 왜 사용해야 하는 건지 간단하게 짚고 넘어가자. Sass의 가장 큰 장점은 CSS 작업 생산성을 높여준다는 것이다. 그래서 스타일시트를 빠르게 작성할 수 있고, 편리하고 깔끔하게 정리할 수 있다. 게다가 C나 자바처럼 어렵지 않기 때문에 배우기도 쉽다. 뭐, 이 정도면 Sass를 사용할 이유는 충분한 것 같다.

3. Sass 문법 종류

Sass 문법에는 2 종류가 있다. 바로 기존의 Sass 문법과 새로운 Sass 문법인 SCSS 문법이다. 인터넷 검색을 해보면 이 Sass와 SCSS가 혼용 되는 것을 볼 수 있다. 그 이유는 Sass 문법이 2가지로 분류되기 때문이다.

기존 Sass 문법은 처음 Sass가 나왔을 때부터 있던 문법으로 그냥 Sass 문법이라고 부른다. 

새로운 문법인 SCSS 문법은 기존 Sass 문법을 더 발전시킨 것으로 CSS 문법과 완벽한 호환성을 가지고 있다. 따라서 Sass를 사용한다면 더 최신 문법인 SCSS 문법을 사용하여야 한다.

참고로 Sass 문법으로 작성한 파일은 .sass 확장자를 가지고, SCSS 문법으로 작성한 파일은 .scss 확장자를 가진다. 이 두 파일을 서로 convert 하려면 sass-convert라는 것을 이용하면 된다.

4. Sass 출력 스타일

Sass 파일을 Sass compiler로 컴파일하여 .css 파일을 만들 때 다음 4가지 중 하나의 출력 스타일을 사용할 수 있다.

1. 중첩 스타일 (nested) : 기본적인 출력 스타일로 중첩 정도에 따라 들여쓰기 함.

2. 확장 스타일 (expanded) : 기존 CSS 스타일과 거의 동일

3. 축약 스타일 (compact) : CSS 규칙을 한 줄에 표시해서 코드의 공간을 최소화함

4. 압축 스타일 (compressed) : 가독성은 고려하지 않음. css 파일 용량을 최대한 줄이기 위한 스타일

어떤 출력 스타일을 선택하느냐에 따라 주석의 출력 방식도 달라진다. 그리고 출력 스타일은 Sass 설치 시 :style 옵션 값으로 설정하거나 커맨드 라인에서 --style 플래그를 사용해서 변경할 수 있다.

5. Sass 주석

Sass 주석에는 인라인 주석( // )과 블록 주석( /* */ )이 있다. 보통 인라인 주석은 개발 용도로만 쓰이며 최종 CSS 출력물에는 표시되지 않는다. 블록 주석은 Sass 출력 스타일에 따라 다음과 같이 출력 여부가 달라진다. 

먼저 nested, expanded 스타일에서는 최종 CSS 출력물에 주석이 그대로 출력 되며, compact 스타일에서는 여러 줄의 주석이 한 줄로 표시된다. compressed에서는 블록 주석도 최종 CSS 출력물에 전혀 출력 되지 않는다. (단, 주석에 !를 넣으면 compressed에서도 주석을 출력할 수 있다.)

Sass는 주석을 쓸 때도 이른 바 변수 끼워 넣기 (interpolation)를 할 수 있다. 이 방식은 주로 버전 정보를 표시할 때 이용한다. 

ex. /* This version is $version */

6. Sass 변수

Sass의 핵심은 변수이다. Sass 변수는 $를 써서 표시한다. 변수를 사용하면 동시에 여러 곳에 동일한 값을 적용할 수 있고, 변경할 때 일일이 바꿔주지 않아도 된다. 또한 개발자의 입력 실수도 줄일 수 있다.

ex. $button_color : #fff

.button1 {

    color : $button_color;

}

.button2 {

    color : $button_color;

}

Sass 변수에는 전역 변수와 지역 변수가 있다. 전역 변수는 문서 최상위 범위에 적거나 지역 변수 앞에 !global를 넣어 만들 수 있다. 그리고 Sass 변수는 !default를 사용하여 디폴트 값을 줄 수 있다. 

7. Sass 문법을 더 공부하려면?

이 밖에 Sass if문, Sass mixin, Sass import, Sass extend, 부모 선택자 등 더 공부해야 할 Sass 문법들이 있다. 이런 Sass 문법이나 활용 방법을 제대로 공부하려면 Sass 강의를 한 번 빠르게 보는 것을 추천한다. 처음 Sass 설치부터 VS Code 설정까지 빠르게 짚고 넘어갈 수 있다.

실력이 있는 개발자라면 강의 앞 부분만 봐도 다음이 어떻게 진행될지 금방 눈치챌 수 있을 것이다. 이 후에는 실무적인 Sass 활용법만 빠르게 체크해보면 된다. 참고로 이 강의 말고도 유데미에서 찾아보면 좋은 css 강좌나 sass 강좌가 많이 있다. 할인 시즌만 잘 활용하면 무료나 저렴한 강의를 찾을 수 있다. 

그리고 Sass 말고도 비슷한 CSS 전처리기로 Less라는 것이 있다. 이번에 Sass 사용법을 배우는 김에 Less 사용법도 같이 공부할까 했다. 하지만, 새로 나온 웹 개발자 로드맵에 따르면 Less 공부는 별로 권장되지 않고 있다. 그러니 CSS를 효율적으로 다루고자 한다면 Sass 사용법 하나만 제대로 익히면 된다.

8. Sass 참고 URL 모음

Sass 공식 사이트 : https://sass-lang.com/

Sass Basics Guide : https://sass-lang.com/guide

Sass Doc GitHub 주소 : https://github.com/SassDoc/

Sass Design Pattern 관련 글

** 336x280 **