[CSS] Sass(SCSS) 알아보기

Sass(SCSS)란?

Sass(=SCSS)에 대해 이해하기 전에 우선 CSS부터 이해하고 넘어가야 한다. CSS란 표현하지 못하는 게 없을 정도로 충분히 훌륭한 언어이긴 하나 치명적 단점 또한 존재한다. CSS는 규모가 커질수록 코드가 복잡해지고 유지보수에 매우 불리하다.
Sass는 이러한 CSS의 치명적 단점을 보완하기 위해 나온 CSS 확장 언어이며, CSS에 존재하지 않는 다양한 기능들도 가지고 있다.

Sass(SCSS)를 사용해야 하는 이유

Sass(SCSS)는 다음과 같은 장점들을 가지고 있다.

· 가독성 : CSS보다 간단명료한 문법으로 CSS를 구조화하여 표현 가능
· 호환성 : 모든 버전의 CSS와 완벽 호환
· 기능성 : 다양한 기능을 제공하며, CSS보다 모든 면에서 뛰어남
· 인지도 : 업계에서도 인정받으며 실무에서 많이 사용됨
· 확장성 : Sass 기반의 프레임워크가 다수 존재
· 안정성·신뢰도 : 오랜 기간동안 적극적인 서포트 아래 관리되어 온 확장 언어

Sass와 SCSS의 차이점

본 포스팅에서는 지금까지 Sass와 SCSS를 묶어서 설명했지만 사실 Sass와 SCSS는 같은 CSS의 파생 언어이기는 하지만 문법 생김새는 다르다. 이에 대해 설명해보도록 하겠다.

/* Sass 예시코드 */
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

/* SCSS 예시코드 */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

위의 예시코드에서 알 수 있듯이 Sass는 들여쓰기와 줄바꿈 형식으로만 이루어졌으며 CSS에서의 중괄호와 세미콜론을 생략하고 사용하는 반면, SCSS는 기존의 CSS와 다를 바 없이 중괄호와 세미콜론을 사용하는 것을 알 수 있다.

SCSS는 Sass의 3 버전에서부터 등장한 언어로 기존 Sass의 문법 방식이 CSS와 상이하여 불편하고 익숙치 않을 퍼블리셔들에게 친근하고 익숙한 CSS와 비슷한 구문을 가지고 등장하였다.
Sass 공식 레퍼런스조차도 Sass보다 CSS와 더 비슷한 SCSS를 선호하고 있으며 사용자 수도 SCSS 쪽이 압도적으로 많기 때문에 SCSS를 사용할 것을 권장한다.

---

CSS에는 없고 Sass(SCSS)에만 있는 기능

CSS에는 없지만 Sass(SCSS)에 있는 기능이 있다.

변수(SCSS Variables)

자바스크립트에서처럼 재사용하려는 속성 정보를 변수에 저장하는 방법이 존재한다.
사용 방법은 $ 기호를 사용하는 방법이 있다.

/* CSS */
/* 재사용 불가능. 일일이 수작업 해줘야 함. */
body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

/* SCSS */
/* 자바스크립트의 변수처럼 속성을 저장해서 언제든지 재사용 가능. */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}