CSS Preprocessor, SASS, SCSS

 

 

CSS Preprocessor(전처리기)

CSS 전처리기는 CSS가 동작하기 전에 사용하는 기능을 하며, 전처리기의 종류로는 SASS, LESS, Stylus 등이 있다. (참고로 SASS와 LESS와 같은 컴파일 언어를 개발하기 위해 사용하는 - CSS 도구 개발을 위한 프레임워크 - PostCSS도 있다.)

 

CSS 전처리기는 CSS 문법과 유사하지만 표준 CSS보다 많은 기능을 사용하기 때문에 보다 편리하게 작성할 수 있다. 하지만 웹에서 직접 동작하지 않기 때문에, 작성한 전처리기는 웹에서 동작 가능한 표준 CSS로 컴파일해야 한다.

즉, 전처리기로 작성하고 CSS로 컴파일해서 동작시킨다. (컴파일의 경우 전처리기의 종류마다 방법이 다소 다름)

 

---

SASS와 SCSS의 차이점?

SCSS는 CSS구문과 완전히 호환되도록 새로운 구문을 도입해 만든 것이다. (CSS와 거의 같은 문법으로 SASS 기능을 지원 함) SASS의 모든 기능을 지원하므로 CSS의 상위집합(Superset)이라고 볼 수 있다.

 

SASS와 SCSS의 직관적고 간단한 차이는 { }(중괄호)와 ;(세미콜론)의 유무다.

SASS는 선택자의 유효범위를 들여쓰기로 구분하고, SCSS는 중괄호로 범위를 구분한다.

 

다음의 코드를 확인해보자.

SCSS는 CSS와 거의 유사한 형태로 중괄호와 세미콜론을 사용하지만 SASS는 그렇지 않다.

 

이미지 출처 wikipedia

 

(위) SASS,  (아래) SCSS

이미지 출처 HeropyTech

 

 

---

참고 자료 wikipedia, HeropyTech