1. SCSS에 대해서

CSS Preprocessor 란?

HTML, CSS를 다루는 분이라면 한 번은 들어봤을 Sass, Less 등이 있습니다.
이 친구들은 CSS 전(예비)처리기 입니다.
보통 CSS Preprocessor 라고 부릅니다.

CSS가 동작하기 전에 사용하는 기능으로,
웹에서는 분명 CSS가 동작하지만 우리는 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있습니다.

사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다.

어떻게 사용하나요?

위에서 언급한 것처럼 웹에서는 CSS만 동작합니다.
Sass, Less, Stylus 같은 전처리기(이하 ‘전처리기’로 표기)는 직접 동작시킬 수 없습니다.
그렇다면 어떻게 사용할 수 있을까요?

CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)합니다.
전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다.
단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)합니다.
전처리기로 작성하고 CSS로 컴파일해서 동작시키는 거죠.

컴파일은 어떻게 하나요?

전처리기 종류마다 방법이 조금씩 다르고 여러 방식을 제공합니다.
보통의 경우 컴파일러(Compiler)가 필요합니다.
우리는 이제 Sass(SCSS)를 알아볼 것이고 컴파일 방법에 대해서도 같이 살펴보겠습니다.

왜 Sass(SCSS)죠?

보통 언급되는 전처리기 3대장으로 Less, Sass(SCSS), Stylus가 있습니다.

저는 가장 많이 사용하고 진입장벽이 비교적 낮았던 Less를 처음 사용했습니다.
기본적인 기능은 전처리기들이 다 비슷합니다만 개인적으로 Less는 몇몇 기능에 큰 아쉬움이 있었습니다.
정확하게 언급하진 않겠지만 프로젝트 진행 중 Less에서 제공하는 기능의 한계로 막히는 경우가 몇 번 있었는데 그 기능이 Sass나 Stylus에는 있었습니다.
하지만 진입장벽이 낮기 때문에 접하기 쉽고 그만큼 많이 사용되는 듯합니다.

Stylus 같은 경우는 현재 이 블로그(HEROPY)를 만들면서 사용하고 있습니다.
깔끔하고 좀 더 세련됐으며 기능도 훌륭합니다.
하지만 덜 사용되며(덜 유명하며) 비교적 늦게 나왔기 때문에 성숙도는 떨어집니다.
그 때문인지 컴파일 후 사소한 버그가 몇몇 보입니다.

Sass(SCSS)는 언급한 두 가지 전처리기의 장점을 모두 가집니다.
문법은 Sass가 Stylus와 비슷하고, SCSS는 Less와 비슷하며, Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능합니다.
또한, 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭합니다.
그래서 저는 Sass(SCSS)를 선택했습니다.

Sass와 SCSS는 차이점은 뭔가요?

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다.

더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다.
                                                                                                                               출처:  Sass(SCSS) 완전 정복! | HEROPY

Sass(SCSS) 완전 정복!