vscode sass compiler 예제

22 Sep 2023

개발

VSCode는 강력한 편집기로서 SASS(Syntactically Awesome Stylesheets) 컴파일러를 내장하고 있어 스타일시트 작업을 더욱 효율적으로 수행할 수 있습니다. 이번 포스트에서는 VSCode에서 SASS 컴파일러를 사용하는 방법을 알아보겠습니다.

확장 기능 설치

먼저, VSCode에서 SASS 컴파일러를 사용하기 위해서는 SASS 컴파일러와 관련된 확장 기능을 설치해야 합니다. VSCode의 좌측 사이드바에서 “Extensions” 아이콘을 클릭하여 검색창에 “SASS Compiler”를 입력하고, 결과로 나오는 확장 기능 중에서 공식적으로 제공되는 확장 기능을 선택하여 설치합니다.

SASS 컴파일러 설정

확장 기능 설치가 완료되었다면, SASS 컴파일러를 설정해야 합니다.

VSCode에서 Ctrl + , 키를 눌러서 설정을 엽니다.
검색 창에 “SASS Compiler”를 입력하여 관련 설정을 찾습니다.
“Sass: Compile Files” 항목을 찾고, “onSave”로 설정하여 파일을 저장할 때마다 자동으로 컴파일되도록 설정합니다.
“Sass: Output Directory” 항목을 찾고, 컴파일된 CSS 파일이 저장될 디렉토리를 선택합니다.
필요에 따라서 다른 설정들도 조정할 수 있습니다.

SASS 파일 컴파일하기

SASS 파일을 컴파일하기 위해서는 SASS 확장자(.sass 또는 .scss)를 가진 파일을 만들고 편집기에 코드를 작성합니다.

$primary-color: #ff0000;

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

위와 같이 SASS 코드를 작성한 뒤, 이 파일을 저장하면 설정에 따라 VSCode에서 SASS 컴파일러가 동작하여 CSS 파일로 변환합니다.

컴파일된 CSS 파일은 설정한 디렉토리에 저장되며, 이후 웹 페이지에서 해당 CSS 파일을 연결하여 스타일을 적용할 수 있습니다.

마무리

이렇게 VSCode에서 SASS 컴파일러를 활용하여 SASS 파일을 효율적으로 컴파일할 수 있습니다. SASS는 CSS를 보다 간결하고 유지보수가 쉬운 방식으로 작성할 수 있게 해주는 강력한 도구입니다. VSCode와 SASS 컴파일러를 함께 사용하면 손쉽게 SASS 스타일시트 작업을 수행할 수 있습니다.

#SASS #VSCode