💽 SCSS 코딩하는데 유용한 VSCode 확장팩

...

SCSS 확장팩 모음

이번 포스팅에서는 VSCode에서 css 전처리기인 SCSS 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워서 소개하는 것이니 검증된 것이라고 봐도 된다.

또한 만일 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다.

Live Sass Compiler

원래라면 노드 터미널에서 커맨드를 통해 scss를 css로 컴파일 해주지만, 이 익스텐션을 사용하면 저장만 하면 알아서 css파일로 컴파일 해준다.

Live Sass Compiler - Visual Studio Marketplace

Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime.

marketplace.visualstudio.com

설치를 완료하고, .scss 파일을 하나 만들면, 편집기 하단 메뉴에 Watch Sass 아이콘이 생긴것을 볼 수 있다.

Watch Sass 항목을 누르면, Watching... 이라는 메세지와 함께, 같은 경로에 컴파일된 test.css와 test.css.map 파일이 생성된 것을 확인할 수 있다.

참고로 watch sass를 끄게되면 파일에 수정이 있어도 업데이트가 되지 않는다.

.map 파일이란?

scss를 컴파일 해보면 다음과 같이 .map 이라는 파일이 생긴걸 볼 수 있다.

.map 파일은 말그대로 scss 와 css를 매핑 시켜주는 역할을 하는 파일이다.

매핑이된 .map 파일이 있다면 아래 사진과 같이 브라우저에서 아예 scss 파일 선택자를 띄워준다.

SCSS / CSS 폴더 분리

보통 프로젝트를 하면 css파일 말고 scss는 서버가 인식하지 못하는 파일이므로 서버에 올릴 필요가 없다.

그래서 설정에서 scss에서 컴파일된 css파일은 [css]폴더에 저장되게 처리를 하면 프로젝트 트리 구성을 정리하는데 도움이 된다.

setting.json을 열고 다음과 같이 항목을 추가해준다.

{
    "liveSassCompile.settings.generateMap": false, // 만일 .map 파일 생성을 끄고 싶다면
    "liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": 경로
    }
    ],
    "liveServer.settings.donotShowInfoMsg": true
}