SASS/SCSS 소개

CSS 전처리기

CSS를 어느정도 배우다보면 CSS 전처리기(Preprocessor)라는 말을 많이 들어보셨을 것 입니다. 이름 그대로 전처리기는 CSS가 동작하기 전에 먼저 동작을 하는 코드입니다. 그러면 무엇을 위해서 전처리기를 사용하는 것 일까요?

CSS를 사용하면서 작성이 어렵다고 느끼는 이유 중 하나가 복잡한 선택자와 문법 때문일 것 입니다. 이 복잡한 문법들은 작성할 때도 불편하고, 가독성도 의도하지 않게 나빠집니다. 그래서 전처리기는 개선된 문법들(변수, 선택자 중첩, 반복 구조 등)을 지원해서 CSS를 좀 더 편하게 작성할 수 있도록 도와줍니다.

전처리기의 동작

이러한 CSS 전처리기는 코드를 작성했을 때 바로 동작하지는 않습니다. 왜냐하면 웹에서는 CSS만이 동작하기 때문입니다. 그래서 전처리기를 사용할 경우 전처리 파일을 CSS로 컴파일시킨 후 동작시키게 됩니다.

전처리기마다 컴파일 방식이 조금씩 다르고, 종류도 여러가지인데, 컴파일 방법에 대해서는 다음 포스트에서 따로 다루려고 합니다.

이러한 전처리기의 종류에는 SASS(SCSS), Less, Stylus 등이 존재합니다.
가장 많이 사용되고 규모가 큰 SASS(SCSS)를 여기서 다루도록 하겠습니다.

SASS/SCSS

방금전에도 언급했지만 많은 CSS 전처리기 중에서 SASS(SCSS)의 사용률, 규모가 가장 크기 때문에 다루게 되었습니다. 또한 기존 CSS와 문법도 비슷하지만 더 간단한 문법을 갖기 때문에 CSS를 알고있다면 정말 쉽게 배울 수 있습니다.

SASS? SCSS?
그런데, 지금 계속 SASS와 SCSS가 섞여서 언급되고 있죠? 두 전처리기를 왜 섞어서 말했는지, 두 전처리기는 어떤 차이가 있는지에 대해서 알아보도록 하겠습니다.

SASS
먼저 SASS는 Syntactically Awesome Style Sheets(문법적으로 멋진 스타일 시트)의 줄임말입니다. SASS 스타일 시트는 .sass 확장자를 갖습니다.

SASS는 다음과 같은 기능들을 제공하고 있습니다.

• 변수의 선언과 사용
• import
• 선택자 중첩(Nesting)
• 조건문, 반복문
• Mixin
• 상속

이러한 기능들 외에 눈에 띄는 가장 큰 차이점은
중괄호{}와 세미콜론;이 SASS에서는 사용되지 않는다는 점입니다.
중괄호 블록대신 들여쓰기로 블록을 구분합니다.

다음과 같은 CSS를 SASS문법으로 고치면 다음과 같습니다.

/* .css */
a {
  color: yellow;
  background-color: black;
  border-radius: 3px;
}

a:hover {
  color: red;
}


/* .sass */
a 
  color: yellow
  background-color: black
  border-radius: 3px
  
  &:hover
    color: red

SCSS
SCSS는 Sassy CSS(멋진 CSS)의 줄임말 입니다. 확장자로는 .scss를 사용합니다.

SCSS는 SASS를 발전시킨 슈퍼셋(Superset) 입니다. 따라서 SCSS는 SASS의 문법을 그대로 사용하지만 문법이 기존 CSS와 유사한 느낌을 주기 때문에 더 쉽게 사용할 수 있기도 합니다. 또한, 수 많은 라이브러리나 프레임워크에서 SASS보다는 SCSS의 문법을 채택하고 있습니다. 그래서 앞으로는 SCSS라고만 언급할 예정이고 사용도 SCSS의 문법을 기준으로 사용하려고 합니다.

SCSS와 SASS를 구분하는 가장 큰 차이점은 중괄호와 세미콜론이 SCSS에는 존재한다는 점 입니다. 위에서 만든 .sass파일을 .scss형식으로 변경해보겠습니다.

a {
  color: yellow;
  background-color: black;
  border-radius: 3px;
  
  &:hover {
    color: red;
  }
}

출처 https://velog.io/@bami/SCSS-SASSSCSS#sassscss