package.json에 sass를 돌리는 스크립트를 작성하고, npm run sass를 하면 sass파일이 컴파일되서 css를 뱉어낸다.

Sass 컴파일 스크립트 작성

// w는 watch 저장하면 실시간으로 반영된다.
// r은 recursive 하위 전체 디렉토리
"node-sass": "node-sass",
"sass": "node-sass -wr styles/main.scss ./style.css"

Prettier 설정

<aside> 💡 command + , : vscode 설정창 열기

</aside>

코드 포맷을 설정에따라 자동으로 맞춰준다.

Sass-lint 설정

css 속성 순서를 잘 지켜줌. 일관된 스타일 코드를 작성 할 수있음.

<aside> 💡 ESlint의 CSS 버전인것 같다.

</aside>

Sass란?

🔥 syntactically awesome style sheet

또다른 언어 같음 ㄷㄷ;;;

<aside> 💡 CSS PreProcessor : CSS 전처리기

</aside>

사용해야하는 이유 🧐??

실제 프로젝트에서는 프로젝트 규모가 상당히 거대하고 복잡하기 때문에 style.css 파일 하나로 감당하기엔 너무나도 고통스럽고 퇴근을 못하는 상황이 발생하기때문…….

조금 더 스타일을 효율적으로 쪼개기 위함!