[SCSS] SCSS(sass)란?

 

[sass란?]

 

sass는 css의 전처리기, 즉 해석되어 css로 컴파일되는 스크립트 언어이다.

기존 우리가 사용하던 sass에서 많이들 들어봤을 mixin, function 등 여러 기능을 제공한다.

 

또한 변수 정의를 허용하는데, 변수는 $ 기호로 시작되고, 변수 할당은 콜론(:)으로 마무리한다.

sassScript는 4가지 자료형을 지원하는데, 수(int), 문자열(string), 컬러, 불린(boolean)을 지원한다.

 

[SCSS란?]

 

scss는 sass의 3버전에서 등장한 언어이다. 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며,

css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.

sass기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서, 퍼블리셔들에게 각광받는 언어이다.

 

[sass와 SCSS의 구문 차이]

 

[sass의 문법]

ul.list
	overflow:hidden
	li
    	float:left
        width:200px
        padding: 20px 30px

[scss의 문법]

ul.list {
	overflow:hidden;
	li {
		float:left;
		width:200px;
		padding: 20px 30px;
	}
}

sass의 경우 '들여쓰기'로 구분하고, scss는 기존 css와 같이 { }로 범위를 구분한다.

가독성을 따져보자면 sass가 더 깔끔하고 간단하지만,

깔끔하고 간단한 sass를 선호하는 사람이 있는 반면, 기존 css 문법과 비슷한 scss를 선호하는 사람도 많다.