[VSCode] SCSS 설치 및 설정 방법

SCSS 설치 및 설정 방법

SCSS란, 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS Preprocessor입니다. SCSS의 기능에 대하여 더 자세히 알고 싶으시다면, 여기를 클릭해 주세요.
오늘은 VSCode에서 SCSS를 사용하기 위한 설치 및 설정 방법을 알아보도록 하겠습니다.

---

1. SASS 설치

먼저, 확장 프로그램(Extenstion, 단축키 Ctrl + Shift + X)에서 Sass를 설치해 줍니다.

하나 더 설치해 줍시다. Live Sass Compiler는 실시간으로 CSS를 Scss로 컴파일해 줍니다.

위와 같이 Scss 파일을 만들었을 때, VSCode의 하단에 나타나는 Watch Sass 문구를 통해 정상적으로 설치되었는지 확인할 수 있습니다.

2. 설정 방법

Sass는 설치 후 바로 사용할 수 있지만, 더 편리한 사용을 위해 설정을 변경할 수도 있습니다. 그 방법을 알아봅시다.

단축키 F1을 누른 후, 위와 같이 json을 검색하면 확장 프로그램의 세팅을 할 수 있는 settings.json을 찾을 수 있습니다.

2-1) Map 파일 설정

"liveSassCompile.settings.generateMap": false

설정 없이 Scss를 CSS로 컴파일할 때, 자동으로 Map 파일이 함께 생성되는 것을 알 수 있습니다. 위 코드를 settings.json에 입력하면, 더 이상 Map 파일을 생성하지 않습니다.

2-2) CSS 파일 경로 설정

"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "~/../css/"
    }
]

위 코드를 입력하여 저장되는 CSS 파일에 대한 설정을 변경할 수 있습니다. extensionName에는 min.css를 입력했는데, 이것은 공백과 줄바꿈을 제거하여 용량을 줄인 CSS 파일입니다. savePath에는 CSS 파일이 저장되고자 하는, 원하는 경로를 입력하면 됩니다.