Sass_1. 개념

CSS Preprocessor의 필요성

만약 다음과 같이 반복되는 CSS의 상위 클래스 선택자 list가 있다고 하자.

.list {
  float: left;
}
.list li {
  color: red;
  background: url("./image.jpg");
}
.list li:last-child {
  margin-right: -10px;
  width: 100px;
}

이런 식으로 하위 선택자들이 늘어난다면 같은 상위선택자를 반복적으로 작성해야 하는 번거로움이 있었다. 만약 이를 자바스크립트와 같이 중첩할 수 있다면?

.list {
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
      width: 100px;
    }
  }
}

여기에 추가로 자주 사용하는 색이나 요소를 변수로 지정할 수도 있다면 작성해야 할 코드가 획기적으로 줄어들 것이다. 이러한 기능을 지원하는 것이 바로 CSS Preprocessor(전처리기)이다.

CSS Preprocessor는 타입스크립트가 JS로 컴파일 되는것과 같이, 작성 후엔 CSS로 컴파일(트랜스 파일)된다. 따라서 결과적으로 브라우저는 CSS 파일을 기반으로 렌더링하게 된다. 이러한 과정을 거치면서 Preprocessor를 이용하는 이유는 바로 작성자의 편의를 위해서이다.

CSS 전처리기는 Sass, Less, Stylus가 가장 널리 쓰이며, 문법이 서로 비슷하므로 먼저 가장 흔하게 사용되는 Sass를 중심으로 알아보려 한다.

SASS와 SCSS

Sass는 Syntactically Awesome Style Sheets의 약자로, CSS 작성의 편의를 위해 개발된 CSS Preprocessor이다. Sass는 다음과 같이 CSS 문법에서 과감하게 중괄호와 세미콜론을 없애버렸다.

body
  font: 100% Helvetica, sans-serif
  color: #333;

또한, 다음과 같이 변수를 이용해 특정 속성을 저장할 수 있게 되었다.

$primary-color: #333

body
  color: $primary-color

그러나 Sass는 기존 CSS 문법과 달라 혼란스러울 수 있다. 따라서 SCSS라는 CSS의 '슈퍼 셋'을 사용할 수 있다. 이는 보다 CSS 문법에 가깝게 보이도록 Sass에서 중괄호와 세미콜론을 추가한 것이라고 할 수 있다.

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

Sass의 특징과 단점

CSS와 다른 Sass의 기능은 다음과 같다.

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

한편 Sass가 가지는 단점은 다음과 같다.

• 별도의 컴파일 과정을 거쳐야 함
• 디버깅의 어려움
• CSS 파일 크기가 커짐

참고
HEROPY Tech - Sass(SCSS) 완전 정복!
poiemaweb - Sass의 소개, 설치와 간단한 명령어 사용법