[CSS] SCSS란 무엇인가?

CSS 전처리기가 태어난 배경

CSS의 불필요한 선택자의 과용과 연산 기능 한계, 구문의 부재 등의 고질적인 문제를 개선하기 위해 CSS 전처리기가 등작했습니다. 어찌됐든 웹 표준은 CSS만 이해할 수 있기 때문입니다. 

CSS Preprocessor(전처리기) 란?

Sass(SCSS), Less, Stylus  를 들어보셨나요. 

위 종류들은 CSS 전(예비)처리기 입니다. CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 CSS로 동작하지만 우리는 CSS의 불편함을 확장 기능으로 상쇄할 수 있습니다. (Sass는 CSS의 확장이라고 생각하면 됩니다.)

 

어떻게 사용할까?

전처리기로 직접 웹에서 동작시킬 수는 없습니다. 우선 전처리기로 코드를 작성합니다. 

• 전처리기는 CSS문법과 굉장히 유사
• 선택자의 중첩(nesting)이나 조건문, 반복문, 다양한 단위의 연산 등.. 표준 CSS보다 훨씬 많은 기능을 제공

작성한 전처리기 코드를 웹에서 동작 가능한 표준의 CSS로 컴파일(compile)합니다. 

전처리기로 작성한 코드 - (컴파일) -> CSS

그렇다면 컴파일은 어떻게 할까요?

전처리기 종류마다 방법이 조금씩 다르고 여러 방식을 제공합니다.

보통의 경우라면 컴파일러가 필요합니다. 

 

왜 SCSS를 사용하나?

Sass(SCSS)는 less와 stylus의 장점을 모두 가지고 있습니다.

문법은 Sass가 stylus와 비슷하고, scss는 less와 비슷합니다. Sass와 SCSS는 하나의 컴파일러로 모두 컴파일이 가능합니다. 또한, 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 보유하고 있습니다. 

 

Sass와 SCSS의 차이점?

보통 Sass 를 SCSS와 세트로 말하곤하는데 둘의 차이점이라 하면 SCSS가 Sass의 모든 기능을 지원하는 CSS의 상위집합(superset)입니다. 

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

🌝쉽게 말하면 SCSS는 {} 중괄호와 ; 세미콜론을 사용하지만 Sass는 없습니다. 

• Sass는 선택자의 유효범위를 '들여쓰기'로 구분 //파이썬 같네요
• SCSS는 {} 로 범위를 구분

+ 또 다른 차이점:

Mixin('믹스인', 재사용 가능한 기능을 만드는 방식을 의미) 예제

/* Sass */

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)
  
/* SCSS */
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

• Sass는 단축 구문으로 사용합니다. 또한, = 와 + 기호로 Mixins 기능을 사용했고, 
• SCSS는 @mixin 과 @include로 기능을 사용했습니다.

---

컴파일 방법

다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발 환경(node.js)에서 추천하는 몇 가지 방법을 소개합니다.

저는 parcel을 통해서 사용했고, react 프로젝트라면 해당 프로젝트의 모듈 번들러 세팅(웹팩 등..)을 통해서 해야할 거 같네요. 간편한 방법도 있지만.. 본문에서 쓰기에는 내용이 너무 많아지기 때문에.. 자세한 내용은 하단의 사이트를 참고하시면 될 거 같습니다. 

---

allref: https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!