Sass는 CSS의 전처리기로 사용되며, CSS 작성을 보다 쉽고 효율적으로 만들어줍니다. Live Sass Compiler는 Sass 파일을 실시간으로 컴파일하여 CSS 파일로 변환해주는 도구입니다. 이번 예제에서는 Visual Studio Code에서 Live Sass Compiler를 설정하는 방법을 알아보겠습니다.

1. Visual Studio Code 설치

Live Sass Compiler를 사용하기 위해 먼저 Visual Studio Code를 설치해야 합니다. 해당 웹 사이트에서 다운로드 및 설치를 진행하십시오.

2. Live Sass Compiler 확장 프로그램 설치

Visual Studio Code를 실행한 후, 좌측의 Extensions 아이콘을 클릭합니다. 검색 창에 “Live Sass Compiler”를 입력하여 확장 프로그램을 찾습니다. 해당 확장 프로그램을 클릭하여 설치합니다.

3. Live Sass Compiler 설정

Visual Studio Code에서 settings.json 파일을 엽니다. 이 파일에서 Live Sass Compiler의 설정을 변경할 수 있습니다.

다음은 settings.json 파일에 추가해야하는 예제 코드입니다.

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/styles"
    }
]

위의 예제 코드는 Sass 파일을 컴파일하여 확장자가 .css인 파일로 변환하고, styles 폴더에 저장합니다. 필요에 따라 format, extensionName, savePath 값을 수정할 수 있습니다.

4. Sass 파일 생성 및 컴파일

Sass 파일을 생성하고, Visual Studio Code에서 해당 파일을 엽니다. 파일을 열면 Live Sass Compiler가 자동으로 감지하고 컴파일을 시작합니다. 컴파일된 CSS 파일은 설정한 savePath에 저장됩니다.

Live Sass Compiler는 수정된 Sass 파일을 자동으로 감지하여 변환된 CSS 파일을 업데이트합니다. 따라서 Sass 파일을 수정하고 저장하면 CSS 파일이 자동으로 업데이트됩니다.

이제 Live Sass Compiler를 사용하여 Sass를 실시간으로 컴파일할 수 있는 방법에 대해 알아보았습니다. 이를 통해 보다 쉽고 효율적으로 Sass 작업을 진행할 수 있습니다.

#sass #sasscompiler