VScode로 쉽게 Sass(Scss) 설치, 세팅하기

sass란 css의 단점을 보완하기 위해 만든 CSS전처리기(Preprocessor)입니다.

큰 프로젝트를 하다보면 css의 코드가 길어지고 가독성이 떨어지게 됩니다. 또한 유지보수도 불편하게 됩니다.

이럴때 sass를 사용한다면 코드의 양을 줄일수 있고, 변수나 함수를 이용하여 코드의 재활용이 가능합니다.

 

 

SASS개발환경 세팅하기

npm으로도 설치하여 사용할수 있지만 VScode툴을 이용하면 쉽게 sass를 이용할수 있습니다.

 

 

1. VScode 에디터가 없다면 먼저 설치해줍니다.

Download Visual Studio Code - Mac, Linux, Windows

2. VScode의 extension메뉴가 있는데 클릭 후 검색 입력창에 'sass'라고 입력해줍니다.

3. Live Sass Complier가 나오는데 이것을 클릭하여 설치해 줍니다.

(2개가 나오는데 최신 버전을 이용해 주세요)

 

 

4. 설치 후 VScode 우측 하단을 보면 Watch sass라는 것이 생깁니다.

(하단 바가 안보이면 View > Apperance > Status bar를 키면 됩니다.)

 

상태 표시줄에서 Watch Sass를 클릭하여 라이브 컴파일을 실행할수 있습니다. 다시 한번 클릭하면 Sass라이브 컴파일이 꺼지게 됩니다.

실행하면 watching...이라고 표시되면 잘 동작하는 것입니다.

 

scss파일을 수정하면 css파일과 map파일을 알아서 생성해줍니다.

(map파일이란 크롬브라우저에서 디버깅 할때 css가 아니라 scss파일로 볼수 있게 해주는 파일입니다.)

세상편리합니다.

오류없이 잘 컴파일 되었다면 Success라고 뜹니다.