Sass(SCSS) 개요

Sass(SCSS)란?

CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 진다.

Sass는 컴파일 과정을 통해 CSS 파일을 생성해 주는 CSS의 확장 언어이자 전처리기(preprocessor)로써, CSS에는 존재하지 않는 다양한 기능들을 가지고 있다.

그리고 이 기능들은 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는 데 도움이 된다.

한 가지 주의해야 할 점은, Sass는 CSS의 대체 언어가 아니라는 점이다.

Sass는 CSS의 확장 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈이다.

Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차이다.

Sass를 사용하는 이유

• 호환성: 모든 버전의 CSS와 완벽하게 호환된다.

• 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다.

• 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다.

• 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다.

• 신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다.

• 확장성: Sass 기반의 프레임워크가 다수 존재한다.

SCSS 와 Sass의 차이점

단지 문법의 차이다.

SCSS는 중괄호를 사용하여 범위를 지정하고 속성 끝에 세미콜론을 붙인다.

Sass는 중괄호가 아닌 들여쓰기로 범위를 지정하고 세미콜론을 생략한다.

표준 CSS와의 호환성을 높게 유지하려면 SCSS를 사용하는 것이 좋다.

표준 CSS 문법

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

SCSS 문법

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Sass 문법

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none