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;
  }
}

저는 개인적으로 중괄호와 세미콜론이 있는 SCSS가 확실히 편했습니다.

이번 포스트에서는 SCSS에 대해서 알아봤습니다. 다음 포스트부터 본격적으로 SCSS를 사용하는 방법에 대해서 알아보겠습니다.