live sass compiler 설정

22 Sep 2023

개발

Sass는 CSS를 작성하기 위한 강력한 프리프로세서입니다. 그러나 매번 Sass 파일을 컴파일하기 위해서는 번거로울 수 있습니다. 이러한 문제를 해결하기 위해 Visual Studio Code에서 제공하는 “Live Sass Compiler” 확장 프로그램을 사용하여 Sass 파일을 실시간으로 컴파일하고 자동으로 CSS로 변환할 수 있습니다.

1. Visual Studio Code 설치 및 확장 프로그램 설치

Visual Studio Code를 다운로드하고 설치한 다음 Marketplace에서 “Live Sass Compiler” 확장 프로그램을 찾아 설치합니다.

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

Visual Studio Code를 열고 확장 프로그램 탭을 클릭한 후 “Live Sass Compiler” 확장을 찾습니다. “Extensions” 옵션을 클릭하고 “Live Sass Compiler” 설정을 눌러 확장 프로그램의 옵션 창을 엽니다.

3. 확장 프로그램 설정 변경

확장 프로그램 설정 창에서 다음과 같은 옵션을 변경할 수 있습니다:

savePath: 변환된 CSS 파일이 저장될 경로를 설정합니다.
liveSassCompile.settings.generateMap: CSS 맵 파일을 생성할지 여부를 결정합니다.
liveSassCompile.settings.autoprefix: CSS 코드에 자동으로 Prefix를 추가합니다.
liveSassCompile.settings.formats: 변환된 CSS 파일의 포맷을 선택합니다.

이제 Sass 파일을 작성하고 저장하면 “Live Sass Compiler”가 자동으로 Sass 파일을 컴파일하고 CSS로 변환하여 지정한 경로에 저장합니다.

// styles.scss

$primary-color: #FF0000;

body {
  background-color: $primary-color;
  color: white;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

위의 예시 코드는 Sass 파일인 styles.scss로 작성된 내용입니다. 저장하면 “Live Sass Compiler”가 자동으로 컴파일하여 styles.css 파일을 생성합니다.

이제 “Live Sass Compiler” 확장 프로그램을 사용하여 Sass 파일을 실시간으로 컴파일하고 CSS 파일로 변환하는 방법을 알게 되었습니다. 이를 통해 개발 작업을 더욱 효율적으로 수행할 수 있습니다.

#sass #CSS #SassCompiler #VSCode