[SCSS] SCSS 사용할 때 유용한 확장 프로그램 (ft. VSCode)

VSCode 카테고리에 유용한 확장 프로그램 추천 게시글이 있으나 SCSS만 따로 정리하고자 새로 작성한다.

(마지막 수정 일자 : 2022.06.13)

---

1. SCSS IntelliSense

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss 

SCSS IntelliSense - Visual Studio Marketplace

꼭 필요하다 생각하는 확장 프로그램인데, 바로 "자동완성"을 도와주는 역할을 한다.

여기서 말하는 자동완성은 CSS 전처리기의 특징인 변수나, MIXIN, 함수 등을 사용했을 때를 말하는데, SCSS를 사용해보면 알겠지만 같은 파일에 있는 건 상관없으나 만약 파일이 나뉘어 있다면 뭐가 선언되어있는지 알 수 없다.

특히 전역변수의 경우 파일을 따로 만들어 관리하는데, 다른 파일 즉 현재 사용할 수 있는 것들의 자동완성을 도와준다고 생각하면 된다.

물론 자동완성이 없어도 직접 찾아서 사용하면 되기는 하는데, 그럴 경우 너무 생산성이 떨이 지니 꼭 사용하길 바란다.

 

2. SCSS Formatter

https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter 

SCSS Formatter - Visual Studio Marketplace

이 확장 프로그램은 쉽게 말하면 Prettier처럼 포맷팅 해주는 건데, 특징은 Prettier는 다양한 파일 형식을 지원하는 반면 SCSS Formatter는 오로지 SCSS를 중점으로 이루어져 있다. 뭐 굳이 필요하다 생각하진 않지만 그래도 다운로드 수가 많은 거 보니 인기가 많은 확장 프로그램인 건 맞는 거 같다.

출처: https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter

---

3. scss snippet

https://marketplace.visualstudio.com/items?itemName=Miladfathy.scss-snippet 

scss snippet - Visual Studio Marketplace

SCSS 문법을 손쉽게 사용하도록 도와주는 확장 프로그램이다.

문법 자동완성 기능이라고 보면 된다.

 

출처: https://marketplace.visualstudio.com/items?itemName=Miladfathy.scss-snippet

 

4. Live Sass Compiler

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass 

Live Sass Compiler - Visual Studio Marketplace

Sass나 SCSS를 자동으로 css로 컴파일시켜주는 확장 프로그램이다.

굉장히 유용한 확장 프로그램은 맞으나, 환경이 제대로 잡혀있는 프로젝트의 경우 딱히 필요한가? 싶기도 하다.

그래도 상황에 따라 알아두면 정말 좋은 확장 프로그램인 건 맞는 거 같다.

---

* 추가적으로 SCSS 그 외 VSCode에서 유용한 확장 프로그램은 하단의 게시글을 참고해보자.

[VSCode] 개발할 때 유용한 확장 프로그램 추천

[VSCode] 개발할 때 유용한 확장 프로그램 추천 (UPDATE: 2022-06-09)