2022-01-08

나는 프론트 개발할 때 Bootstrap은 절대 안쓰는 주의다.

Bootstrap 자체가 무거워서 성능에 영향이 있다는 이유도 있지만,

다른 디자인의 스타일시트를 갖다쓰는 것보다 내가 직접 만들어 쓰는 경우가 많아서 그렇다.

그래서 이제까지 CSS를 엄청나게 연마해왔는데...

이게 CSS 코드를 직접 짜다보면 선택자가 반복되는 게 너무 거슬렸었다.

찾아보니 SCSS라는게 있었고, 내가 불편했던 점들을 해소시켜준 거같다.

그 SCSS의 사용법을 적어보려 한다.

일단 SCSS는 브라우저에서 바로 사용할 수 있는 CSS로 컴파일해주는

CSS 전처리기 중 하나이다.

CSS 전처리기로는 SASS, Less, Stylus 등이 있다.

그래서 설치 모듈이 필요하다.

npm i -D sass node-sass sass-loader

SCSS 문법을 설명하기 위해 먼저 CSS로 된 예제를 보자.