[Sass] Sass란? Sass 시작하기

 

웹의 규모가 커지다 보면 css로만 작업하는게 힘든경우가 많은데 이때 css 전처리기를 사용하곤한다.

 

css 전처리기란?

css는 매우 원시적인 언어로 웹에서는 표준 css만 동작을 한다.

따라서 사람들은 css에 변수, 함수등을 쉽게 사용하기 위해 전처리기를 이용한다

대표적으로 Sass, less, postcss 등이 있으며, 전처리기로 작성하고 css로 컴파일하여 css 포맷으로 변환한다

 

결국, Sass는 css 전처리기 중 하나이고 Sass를 통해 작성하고 이를 css로 컴파일하여 이용한며 css에 프로그래밍적 요소를 쉽게 사용하기 위해서 사용하는 것이다

 

 

 

Sass 컴파일방법

앞서 말했듯이 웹은 표준 css만 이해하기 때문에 Sass를 사용하려면 css로 컴파일을 해줘야한다

그럼 컴파일을 어떻게 시킬 것인가?

Sass는 아래와 같이 다양한 방법으로 컴파일이 가능하다

• Dart Sass
• vite
• 등등

하지만 vscode를 이용하면 플러그인을 이용해 쉽게 Sass 컴파일이 가능하다

 

 

 

Live Sass Compiler

1. vscode extension에 live sass compiler를 검색하여 설치
2. vscode 하단에 Watch Sass버튼을 생성된다
3. Watch Sass버튼을 누르면 자동을 css파일로 변환해준다

 

 

위 사진은 test.scss 파일을 작성하고 컴파일을 하는중의 모습이다

폴더를 보면 test.css와 test.css.map이 생성되었다

 

test.css: test.scss가 컴파일된 css파일

test.css.map: 크롬 개발자 도구로 볼 때 scss를 참조할수 있게 매핑해주는 역할

• 웹은 css만 이해하기 때문에 이걸 지우면 디버깅할때 test.css라고만 뜬다. 이를 test.scss라고 뜨게 하기위함이다
• 전체 프로젝트가 Sass파일이 아닐경우 유용하다