(SCSS)Sass와 SCSS

SCSS는 CSS 전처리기이다. 보통 CSS Pre-processor라고 부른다.

CSS 문법은 간결하고 배우기 쉽지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워진다는 단점이 있다.

전처리기는 CSS 문법과 유사하지만 선택자의 중첩, 그리고 조건문과 반복문 등의 표준 CSS 보다 많은 기능을 사용할 수 있기 때문에 편리하다.
그리고 CSS보다 간략한 표기법으로 CSS를 구조화하여 표현할 수 있고, 협업 시 멤버들간의 코드 작성 방식을 평준화 할 수 있다.

단, 브라우저는 Sass 문법을 알지 못해서 웹에서는 직접 동작하지 않기 때문에 전처리기로 작성한 뒤 CSS로 컴파일을 해서 동작시켜야 한다.

대표적인 전처리기로는 Less, Sass(SCSS), Stylus가 있는데, Sass(SCSS)는 나머지 두가지 전처리기의 장점을 모두 가지고 있다.
문법으로는 Sass와 Stylus가, 그리고 SCSS와 Less의 문법이 비슷하며 Sass와 SCSS는 하나의 컴파일러로 둘다 컴파일이 가능하다.

Sass와 SCSS의 차이점으로, SCSS는 Sass의 3버전에서 새롭게 등장한 것인데 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해서 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합이다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다.
더 쉽고 간단한 차이로는 {}와 ;의 유무가 있다.