[Sass] Sass란 뭘까? Sass를 사용하는 이유? Sass와 SCSS의 차이는?

 

" Sass 는 기능이 뛰어나고 안정적인 CSS 확장 언어이다."

- Sass team -

 

Sass란 

Sass에 대해 얘기하기에 앞서, CSS에 대한 이야기를 먼저 해야 할 것 같습니다. CSS는 그 자체로도 충분히 재미있고, 훌륭한 형식 언어입니다. CSS는 웹 콘텐츠를 위한 스타일시트 형식 언어로써 (대체 언어가 사실상 존재하지 않는다는 사실이 한 몫 했겠지만)오랜 기간 사랑 받아 왔고, 아마 앞으로도 오래도록 사랑 받을 것입니다. 

 

그러나 CSS를 조금이라도 다뤄 본 경험이 있는 개발자라면, 특유의 치명적 단점에 대해 아주 잘 알고 있을 것입니다. 예상하고 계실 테지만, CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 집니다. CSS 코드 내에서 동일한(혹은 유사한) 코드를 재사용하기 위해서 할 수 있는 유일한 조치는 '복사 & 붙여넣기' 뿐이며, 이는 무척 귀찮고, 짜증나고, 또 실수를 유발하는 작업입니다. 

 

Sass는 앞서 언급한 CSS의 치명적 단점을 보완할 수 있는 몇 가지 방법 중 단연 최선의 방법입니다. Sass는 컴파일 과정을 통해 CSS 파일을 생성해 주는 CSS의 확장 언어이자 전처리기(preprocessor)로써, CSS에는 존재하지 않는 다양한 기능들을 가지고 있습니다. 그리고 이 기능들은 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는 데 도움이 됩니다. 

한 가지 주의해야 할 점은, Sass는 CSS의 대체 언어가 아니라는 점입니다. Sass는 CSS의 확장 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈입니다. Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차입니다. 

 

Sass를 사용하는 이유 

Sass는 다음과 같은 특징들을 가지고 있습니다. 

 

- 호환성: 모든 버전의 CSS와 완벽하게 호환된다.  

- 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다. 

- 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다.

- 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다. 

- 신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다. 

- 확장성: Sass 기반의 프레임워크가 다수 존재한다.

 

Sass는 CSS가 가지고 있지 않는 유용한 기능들을 지원합니다. 그리고 이 기능들의 존재 목적은 결국 한 가지, 생산성을 위한 것입니다. 코드를 빠른 시간 안에 간결하게 작성할 수 있도록 해 주고, 코드 수정 시에 신경 써야 할 부분을 최소화해주는 효과도 있습니다. Sass가 제공하는 기능으로는 변수, 네스팅, 믹스인 등이 대표적입니다(여기에 대한 글은 추후 작성할 예정입니다). 

 

Sass와 SCSS

Sass에 처음 관심을 가지게 되면, Sass와 더불어 SCSS라는 용어를 함께 접하게 될 가능성이 무척 높습니다(아마도 100%). 이 둘은 거의 같은 것으로 여겨지고 있다는 느낌을 강하게 주는데, 그로 인해 Sass를 처음 접한 개발자들이라면 이런 의문을 한 번쯤은 품어 보았을 것입니다.

 

'Sass는 뭐고, SCSS는 뭐야?'

 

이는 Sass라는 세계관(?)에 대한 이해가 부족하기 때문이기도 하지만, Sass와 SCSS 차이를 친절하고 알기 쉽게 설명해주는 사람이 그리 많지 않다는 사실 또한 부정할 수 없을 것 같습니다(미리 말씀드리지만, 저도 자신 없습니다).

 

사실 Sass라는 이름에는 두 가지 의미가 담겨 있습니다. 하나는 코드를 CSS로 해석하는 역할을 하는 전처리기로써의 의미, 또 다른 하나는 문법(구문)으로써의 의미입니다. Sass 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 CSS 파일을 만들어낼 수 있습니다(이 작업을 컴파일이라고도 합니다). 절차가 조금 복잡하게 느껴지실 수 있지만, 설명은 언제나 행동보다 어려운 법입니다.  

 

그렇다면 SCSS란 뭘까요? SCSS는 구문입니다. SCSS 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 컴파일러가 이를 CSS로 빌드할 수 있습니다. 간단하죠? SCSS는 기존 Sass 구문에 비해 좀 더 CSS 코드와 유사한 형태를 띄고 있습니다. 아래는 Sass 구문과 SCSS 구문으로 같은 스타일을 작성한 예입니다. 

 

왼쪽이 SCSS, 오른쪽이 Sass. 두 코드의 결과는 같습니다.

 

둘은 완전히 동일한 기능을 갖고 있기 때문에 어느 것을 사용할지는 순전히 작성자에게 달렸습니다. 이것은 단지 시각적 취향의 문제라고 밖엔 할 수 없는데, 필자는 개인적으로 SCSS 구문만을 사용하고 있습니다. 세 살 버릇 여든 간다고 하죠? 처음에 SCSS를 선택했기 때문에 이 선택을 밀고 나가는 것일 뿐, 다른 이유는 없습니다.