[VSCode] VSCode에서 Sass 사용하는 방법

VSCode에서 Sass(SCSS)를 사용하는 방법

이번 포스팅에서는 VSCode에서 Sass를 사용하는 방법에 대해 설명드리겠습니다.

프로그램 설치하기

먼저 Live Server, Live Sass Compiler, Sass, 이렇게 세 가지의 프로그램을 설치합니다.

그런 다음, 환경 설정 탭 상단의 검색창에 「formats」를 검색한 다음 Live Sass Compiler 항목에서 [Edit in setting.json]을 클릭합니다.

위 사진처럼 편집 파일이 열릴텐데 아래의 코드를 덧붙여주세요.

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

위 이미지와 같이 우측 하단의 Watch Sass가 나오면 성공적으로 설치된 것이며 이를 클릭하면 자동으로 CSS 폴더와 CSS 파일을 생성하여 컴파일해줍니다. 정말 편리한 프로그램이죠?