SCSS 개요

CSS는 분명 쉽고 재밌지만, 작업이 고도화될수록 불편함도 같이 커집니다.

불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 CSS 작업이 불편하게 다가옵니다.

하지만 웹에서는 표준 CSS만 동작할 수 있기 때문에 다른 선택권이 없습니다.

CSS Preprocessor

HTML, CSS를 다루는 분이라면 한 번은 들어봤을 Sass, Less 등이 있습니다.

Sass, Less, Stylus 등은 바로 CSS 전처리기에 해당하며 보통 CSS Preprocessor 라고 부릅니다.

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

---

SCSS

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

Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합 입니다.

즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원합니다.

Sass와 SCSS 차이점

가장 명확한 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다.

/* Sass */

div
  width: 100px
  height: 100px
  color: orange

/* SCSS */

div {
    width: 100px;
    height: 100px;
    color: orange;
}

Sass는 선택자의 유효범위를 들여쓰기로 구분하고, SCSS는 {}로 범위를 구분합니다.

단순한 몇 가지를 제외하면 거의 차이가 없지만 복잡한 문장이 될 경우 여러 환경에 따른 장단점이 있을 수 있습니다.

Sass는 좀 더 간결하고 작성하기 편리하며, {}나 ;를 사용하지 않아도 되니 코드가 훨씬 깔끔해집니다.

SCSS는 인라인 코드(한 줄 작성)를 작성할 수 있고, CSS와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 쉽습니다.

---

컴파일 방법

SassMeister

간단한 Sass 코드는 컴파일러를 설치하는게 부담될 수 있으며 그럴 경우 SassMeister를 사용할 수 있습니다.

페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환이 가능하므로 간단한 테스트 및 학습용으로 적합합니다.

Webpack과 Parcel

웹 애플리케이션 번들러들을 사용하여 CSS 전처리 문법들을 CSS로 변환하여 적용할 수 있습니다.

---

참고자료

• https://nm817.tistory.com/39
• https://heropy.blog/2018/01/31/sass/