오늘의 집 클론코딩 내일의 집 프로젝트를 진행하면서 배운 Sass에 대해 알아보자.
Sass
Syntactically Awesome = 문법적으로 🐕쩌는
우리가 CSS로 스타일링을 할 때, 노가다를 하게 되는 경우가 많다. 페이지 마다 같은 버튼의 스타일을 만든다던가, 같은 flex 스타일을 먹인다던가 하는 것들 말이다. 그리고 CSS의 값에 수치를 넣을 때는 일일이 값을 지정해서 넣어주어야 한다.
Sass는 CSS 전처리기로서 CSS에 프로그래밍적 요소를 곁들여 스타일링을 더욱 쉽고 간단하게 할 수 있도록 만들어준다. 특정 값이나 스타일을 변수로 선언하여 반복해서 사용할 수도 있고, for문을 이용하여 여러 스타일을 한번에 적용시킬 수도 있다. 속성 값에 수치를 넣을 때도, 특정한 값이 아닌 계산결과에 따른 가변적인 값을 지정해 줄 수도 있다.
꼭 써야 할까
일단 Sass가 대충 어떠한 것인지는 알았다. 그렇다면 꼭 Sass를 써야 할까? (무조건 써야 한다고 한다고 합니다)
아주 간단한 토이 프로젝트 같은 경우는 기존의 CSS만으로도 충분할 수 있다. 하지만 회사에 들어가서 프로젝트를 진행하게 되면 그 규모면에서 차원이 다르다. 만들어야 할 UI 컴포넌트도 어마무시하게 많다. 나의 편안한 직장 생활을 위해서라도 반드시 배워야 한다. 회사도 이것을 알고 있으며 웬만한 대부분의 회사는 쌩(?)CSS가 아닌 Sass가 아니더라도 CSS 전처리기를 사용하여 스타일링을 한다고 한다.
Sass? SCSS?
그렇다면 Sass와 비슷하게 많이 보이는 SCSS는 무엇일까? 구글의 AI 바드에게 물어보았더니 다음의 답을 내놓았다.
SCSS와 Sass는 같은 언어입니다. Sass는 SCSS보다 먼저 개발되었으며, 두 언어는 서로 호환됩니다. SCSS는 Sass의 확장 언어로, Sass의 모든 기능을 사용할 수 있으며, 중괄호와 세미콜론을 사용할 수 있습니다. 따라서 SCSS는 Sass보다 가독성이 좋고 유지보수가 쉽습니다.
SCSS와 Sass의 차이점은 다음과 같습니다.
- SCSS는 중괄호와 세미콜론을 사용할 수 있습니다.
- SCSS는 Sass보다 가독성이 좋고 유지보수가 쉽습니다.
- SCSS는 Sass보다 많은 기능을 사용할 수 있습니다.
일반적으로 SCSS가 Sass보다 더 많이 사용됩니다.
SCSS는 CSS라는 글자가 들어가 있듯이 우리가 평소에 쓰던 CSS와 문법이 굉장히 비슷하다. 중괄호를 쓰고 세미콜론을 사용한다. 반면, Sass는 세미콜론도 없고 문단으로 띄워서 스타일링을 한다. 그래서 많은 개발자들이 Sass보다는 SCSS를 많이 사용한다. 사실 Sass가 무엇인지 알아보았지만 나도 내일의집을 코딩할 때는 SCSS를 사용했다. 다음엔 SCSS 사용법에 대해 더 알아보도록 하자.
