vscode에서 SASS를 사용하기 위해 간단한 셋팅 방법을 정리해 보았다.
1. Live Sass Compiler 설치
확장 프로그램을 우선 다운받아야 한다.
Live Sass Compiler를 검색 혹은 위 링크를 타고 들어가서 다운 받아준다.
2. 확장 설정
톱니바퀴를 눌러 '확장 설정' 을 들어간다.
settings.json를 들어가 준다.
그러면 저렇게 format을 설정하는 부분이 있다.
extensionName은 컴파일 후 저장할 파일의 확장자이므로, '.css' 라고 적는다.
savePath는 저장할 폴더 경로인데, 해당 프로젝트 폴더 안에 scss와 css 폴더를 각각 만들어 주고 컴파일 후 들어갈 css 폴더를 경로로 지정하면 된다.
3. SCSS 작성 & 컴파일 파일 확인
아까 다운받은 Live Sass Compiler 를 켜 준다.
우선 우측 하단에 위치하고 있으며 클릭으로 on/off 할 수 있다.
그리고 SCSS 폴더에서 '.scss'로 된 스타일을 작성 후 컴파일이 되면 자동으로 css 파일에 '.css'로 컴파일이 완료된 파일이 생성된다.
참고로 컴파일이 불필요한 '.scss' 파일의 경우, 파일명 맨 앞에 언더바(_)를 붙이면 컴파일되지 않는다!
✨ 𝑬𝒗𝒆𝒓𝒚𝒕𝒉𝒊𝒏𝒈 𝒄𝒐𝒎𝒆𝒔 𝒕𝒐 𝒉𝒊𝒎 𝒘𝒉𝒐 𝒉𝒖𝒔𝒕𝒍𝒆𝒔 𝒘𝒉𝒊𝒍𝒆 𝒉𝒆 𝒘𝒂𝒊𝒕𝒔. ✨