Sass란 무엇이고 왜 쓰는가? 간단하게만 알아보자!

Sass

= Syntatically Awesome Style SheetsS

 

Sass? 

나는 styled component 같은 css in js 들은 코디너리에서 많이 봐서 들어봤는데 사실 Sass는 생소했다 

 

쉽게 말하면 Sass는 CSS 전처리기!

그랬다

난 전처리기가 뭔지 몰랐다. ㅎ

전처리기(Preprocessor): 컴퓨터의 처리에 있어서 중심적인 처리를 수행하는 부분을 위해 사전 준비적인 계산을 행하는 프로그램입니다.

 

그래서 더 쉽게 말하자면 Scss는 css 수행 전 사전 준비 계산을 하는 프로그램!  

 

 그럼 뭐가 좋은건데?

- 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들 => 시간을 절약

- 코드 재사용이 가능

 

 

 

보다시피 전처리기 중 Sass의 순위는 꽤 높다. 

아하 ! 그러면 Sass는 만능 전처리기구나? 

놉 아니다. 

Sass도 단점이 존재한다. 

일단 전처리기를 위한 도구가 필요하고, 다시 컴파일 하는데 시간이 소요된다는 단점이 있다. 

또한 네이밍 중복 문제가 해결 되지 않았고 BEM이 등장하는 이유가 된다. 

 

Sass는 전처리기중 가장 먼저 등장한다. 하지만 Ruby언어를 기반으로 구동되었는데 언어의 한계로 컴파일 속도가 느렸고 Less에 추월당한다. 하지만 Node.js 기반의 Node-Sass로 다시 인기를 얻었다. 

 

 

 

참고: https://www.samsungsds.com/kr/insights/web_component.html