코딩독학) 간단한 SASS(SCSS) 사용 방법 - Live Sass Complier

간단한 SASS(SCSS) 사용 방법 - Live Sass Complier

 

 

Syntactically Awesome Style Sheets(SASS)

 

SASS(SCSS)는 CSS 전처리기(Pre-processor)로 CSS의 사용을 더 편리하게 도와주는 도구다. 웹 브라우저는 자체적으로 SASS를 해석하지 못 하기 때문에 컴파일을 통해 SASS 파일에 작성된 SASS 문법을 CSS 문법으로 작성된 CSS 파일로 변환시켜주는 작업이 필요하다.

 

node.js 환경에서 작동되는 컴파일러를 실행할 수도 있지만 실제 사용환경이나 최신 기술을 고려하지 않고 단순히 만든 SASS 작업의 결과를 가시적으로 확인하고 싶을 땐 VS Code의 Extension 기능인 Live Sass Complier 를 사용할 수 있다.

 

 

Live Sass Complier 를 설치하고 나면 우측 하단에 Watch Sass라는 버튼이 생긴다.

 

이걸 눌러서 실행시키면 아래 화면같이 Watching 이라고 표시되며, SASS(SCSS) 파일의 변화를 감지하고 있다는 뜻이다. 

 

코드를 작성하고 저장을 하면 내가 작성한 SCSS 파일과 동일한 이름의 CSS 파일이 생긴 것을 볼 수 있다. 이 CSS 파일들을 HTML 파일과 연결시키면 Live Server 기능으로 즉각적인 결과물들을 확인할 수 있다.

 

 

실제의 제품을 만드는 것이 아닌 간단한 결과물들을 확인할 때 유용한 기능인 것 같다.