Live Sass Compiler는 Visual Studio Code에서 SASS를 실시간으로 컴파일하고 CSS로 변환해주는 유용한 확장 프로그램입니다. 이 프로그램을 사용하기 위해서는 경로 설정이 필요합니다.

아래는 Live Sass Compiler 경로 설정하는 방법입니다.

1. 먼저 Visual Studio Code의 왼쪽 사이드바에서 Explorer를 클릭합니다.
2. 프로젝트 폴더를 마우스 오른쪽 버튼으로 클릭하고 “Open With Live Server”를 선택합니다.
3. 소스 파일이 있는 폴더가 자동으로 열립니다.
4. 소스 파일을 마우스 오른쪽 버튼으로 클릭하고 “Watch Sass”를 선택합니다.
5. 소스 파일이 있는 폴더 안에 .vscode라는 이름의 폴더가 생성됩니다. 만약 이미 존재한다면 해당 폴더를 엽니다.
6. .vscode 폴더 안에 settings.json 파일이 없다면 파일을 생성합니다.
7. settings.json 파일 안에 아래 코드를 추가합니다.

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
    ]
}

1. savePath 속성에서 원하는 CSS 파일이 저장될 경로를 설정할 수 있습니다. 위의 예제에서는 /css 폴더로 설정되어 있습니다.
2. Live Sass Compiler는 변경사항을 코드를 저장할 때마다 자동으로 감지하고, SASS를 컴파일하여 설정한 경로에 CSS 파일을 생성합니다.

위의 설정을 따라하면 Live Sass Compiler를 쉽게 경로를 설정할 수 있습니다. 이제 Visual Studio Code에서 개발을 진행하면 SASS 파일이 자동으로 컴파일되어 CSS 파일이 생성될 것입니다.

#SASS #VisualStudioCode