CSS SCSS Sass 뭐고 뭐가 좋은지

CSS 다음에 생겨난 Sass

CSS(Cascading Style Sheets:종속형 시트)를 작성함에 불편함을 느껴 생겨난 것이 Sass(Syntactically Awesome Style Sheets:문법적으로 어썸한 스타일시트)이다.

CSS를 배우다 Sass를 처음접하면 마치 HTML을 Pug구문으로 작성하는 낯섦이 있다. 세미콜론과 중괄호를 쓰지 않을 뿐더러 잘못된 들여쓰기에 부모자식요소의 하극상이 벌어진다. 그래서 Sass ver.3부터 기존의 Sass의 장점은 가져가되 많이 생략해서 쓰는 낯섦을 없애고 CSS와 비교적 닮아있는 SCSS(Sassy CSS:멋진 CSS)가 생겨나게 됐다.

SCSS는 오히려 CSS보다 먼저배우면 좋겠다 싶을 정도다. Nesting기능 덕분에 선택자의 중복을 없앰과 동시에 위계구조가 한눈에 보여서 스타일을 작성하기 편했고 SCSS의 이해가 더 빨랐던 것같다. 그만큼 직관적이다.