요약 설명VS Code와 WebStorm은 SCSS 개발을 위한 강력한 기능을 제공합니다.
적절한 확장 프로그램과 설정을 통해 문법 하이라이팅, 자동 완성, 자동 컴파일, 디버깅 등을 활용할 수 있습니다.이 페이지에서는 VS Code와 WebStorm에서 SCSS를 효율적으로 사용하기 위한 설정 방법을 단계별로 상세히 안내합니다.
VS Code는 무료이면서도 강력한 기능을 제공하는 에디터입니다.
SCSS 개발을 위한 확장 프로그램을 설치하고 설정하면, 프로페셔널한 개발 환경을 구축할 수 있습니다.
VS Code에서 SCSS를 효율적으로 사용하려면 다음 확장 프로그램들을 설치하는 것을 권장합니다.
Live Sass Compiler
SCSS 파일 저장 시 자동 컴파일, Live Reload, 여러 출력 형식 지원
확장 프로그램에서 "Live Sass Compiler" 검색 후 설치
Sass
SCSS/Sass 문법 하이라이팅, 자동 완성, 문법 검사
확장 프로그램에서 "Sass" 검색 후 설치
SCSS IntelliSense
변수, 믹스인, 함수 자동 완성, 정의로 이동, 사용 위치 찾기
확장 프로그램에서 "SCSS IntelliSense" 검색 후 설치
이 확장 프로그램들을 설치하면 SCSS 개발에 필요한 대부분의 기능을 사용할 수 있습니다.
Live Sass Compiler는 SCSS 파일을 자동으로 컴파일해주는 가장 인기 있는 확장 프로그램입니다.
설치 후 설정을 통해 컴파일 옵션을 조정할 수 있습니다.
프로젝트 루트에 .vscode/settings.json 파일을 생성하여 Live Sass Compiler 설정을 추가합니다.
이 설정으로 scss 폴더의 SCSS 파일이 css 폴더로 컴파일되고, 소스맵과 자동 접두사가 생성됩니다.
설정이 완료되면 VS Code 하단 상태바에 "Watch Sass" 버튼이 나타납니다.
이 버튼을 클릭하면 자동 컴파일이 시작되고, SCSS 파일을 저장할 때마다 자동으로 CSS로 변환됩니다.
Ctrl+Shift+P → "Live Sass: Watch Sass"Ctrl+Shift+P → "Live Sass: Stop Watching Sass"Ctrl+Shift+P → "Live Sass: Compile Sass - Without Watch Mode"
SCSS IntelliSense는 변수, 믹스인, 함수의 자동 완성과 정의로 이동 기능을 제공합니다.
설정을 통해 더 정확한 자동 완성을 사용할 수 있습니다.
이 설정으로 SCSS 문법에 맞는 자동 완성과 문법 검사가 활성화됩니다.
VS Code에서 SCSS 파일과 컴파일된 CSS 파일을 연결하면, 개발자 도구에서 원본 SCSS 위치를 확인할 수 있습니다.
VS Code의 기본 포맷터를 사용하거나 Prettier 확장 프로그램을 설치하여 SCSS 코드를 자동으로 정리할 수 있습니다.
이 설정으로 파일 저장 시 자동으로 SCSS 코드가 포맷팅됩니다.
WebStorm은 SCSS를 기본적으로 지원하는 통합 개발 환경(IDE)입니다.
별도의 확장 프로그램 설치 없이도 문법 하이라이팅, 자동 완성, 자동 컴파일 등의 기능을 사용할 수 있습니다.
WebStorm은 기본적으로 SCSS 파일을 인식하지만, 프로젝트 설정에서 SCSS를 활성화하면 더 정확한 기능을 사용할 수 있습니다.
File → Settings (Windows/Linux) 또는 WebStorm → Preferences (Mac)Languages & Frameworks → Stylesheets → Sass/SCSS에서 SCSS 지원 활성화WebStorm의 File Watcher 기능을 사용하면 SCSS 파일 저장 시 자동으로 CSS로 컴파일됩니다.
File → Settings → Tools → File Watchers
+ 버튼 클릭 → SCSS 선택
다음과 같이 설정합니다:
sass (Sass CLI 경로 또는 $ProjectFileDir$/node_modules/.bin/sass)$FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css$FileParentDir$/css/$FileNameWithoutExtension$.css이 설정으로 웹스톰에서 SCSS 파일을 저장할 때마다 자동으로 CSS 파일이 생성됩니다.
WebStorm에서 SCSS 코드 스타일을 설정하여 일관된 포맷을 유지할 수 있습니다.
File → Settings → Editor → Code Style → SCSS
설정한 스타일에 맞춰 Ctrl+Alt+L (Windows/Linux) 또는 Cmd+Option+L (Mac)로 코드를 자동 포맷팅할 수 있습니다.
WebStorm은 SCSS 변수, 믹스인, 함수의 자동 완성을 기본적으로 지원합니다.
또한 변수명 변경, 정의로 이동, 사용 위치 찾기 등의 리팩토링 기능도 제공합니다.
Ctrl+Space (Windows/Linux) 또는 Ctrl+Space (Mac)Ctrl+B (Windows/Linux) 또는 Cmd+B (Mac)Alt+F7 (Windows/Linux) 또는 Option+F7 (Mac)Shift+F6 (Windows/Linux) 또는 Shift+F6 (Mac)
WebStorm은 SCSS 문법 오류를 실시간으로 검사하고 표시합니다.
에러가 있는 줄에는 빨간 밑줄이 표시되며, 마우스를 올리면 에러 메시지를 확인할 수 있습니다.
VS Code와 WebStorm 모두에서 유용한 SCSS 개발 팁을 정리합니다.
에디터별 설정을 따로 외우기보다는, 이 섹션의 내용을 공통 체크리스트처럼 참고하면 어떤 환경에서도 비슷한 작업 흐름을 유지할 수 있습니다.
소스맵을 활성화하면 브라우저 개발자 도구에서 원본 SCSS 파일의 위치를 확인할 수 있습니다.
디버깅 시 컴파일된 CSS가 아닌 원본 SCSS를 직접 수정할 수 있어 효율적입니다.
에디터의 자동 저장 기능을 활성화하면 파일을 수정할 때마다 자동으로 저장되어 컴파일이 즉시 실행됩니다.
VS Code: File → Auto Save
WebStorm: File → Settings → Appearance & Behavior → System Settings → Save files automatically
자주 사용하는 SCSS 패턴을 코드 스니펫으로 등록하면 빠르게 코드를 작성할 수 있습니다.
에디터의 파일 탐색기에서 SCSS 파일 구조를 시각적으로 확인하면 프로젝트 구조를 이해하기 쉽습니다.
파셜 파일(_로 시작)과 일반 파일을 구분하여 관리할 수 있습니다.
VS Code와 WebStorm에서 SCSS 사용 시 자주 발생하는 문제와 해결 방법을 정리합니다.
실제 작업에서는 “설정이 안 된다”, “자동 컴파일이 안 돈다”와 같은 상황이 자주 발생하므로, 이 섹션을 통해 어디서부터 점검해야 하는지를 미리 익혀두면 좋습니다.
.vscode/settings.json 또는 WebStorm의 File Watcher 설정 확인.map)이 CSS 파일과 같은 위치에 생성되는지 확인
VS Code와 WebStorm에서 SCSS를 사용하는 방법에 대해 알아본 내용을 정리합니다.
어떤 에디터를 선택하더라도, 자동 컴파일·자동 완성·디버깅 환경을 한 번 잘 세팅해 두면 이후 SCSS 학습과 실무 적용 속도가 크게 빨라집니다.
다음 섹션에서는 SCSS의 기본 문법에 대해 자세히 배워봅니다.
