SCSS와 SASS의 차이점은 무엇일까?

🤷‍♂️ 개요

언제나 그렇듯 하나라도 모르고 개발하는 것보다 가장 기초적인 개념이라도 알고 넘어가자는 의미에서 작성하게 되었다. 그런데 CSS 전처리라고 불리는 것이 SCSS, SASS라고 있던데, 이것이 정확히 뭐가 다른 건지 한 번 살펴보고자 한다.

 

😎 요약

결론만 짧게 그리고 간단하게 정리해보자면, SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 , 스타일시트가 점점 더 커지고 용량도 많아지고 복잡해지는 까닭에 유지보수가 어려워지고 있어서 이를 보다 편리하게 관리할 수 있게 도와주는 CSS 전처리기라고 볼 수 있다. 그래서 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판(CSS를 확장하는 스크립팅 언어) 정도로 생각하면 좋다고 말할 수 있을 것 같다.

 

😜 자세히 살펴보기

 

예를 들어 HTML 코드에

 

ul 태그 안에 li 태그가 사진과 같이 여러 개 삽입되어 있다고 가정해보자.

 

이 HTML 코드를 꾸밀 때, 기존의 CSS 스타일링과 우리가 이번에 살펴볼 SCSS, SASS를 사용한 스타일링이 어떻게 다른지 같이 살펴보도록 하자.

 

먼저, 우리가 가장 기본적으로 배워왔던 CSS를 사용하여 스타일을 입혀보면 이런 식으로 작성할 수 있을 것이다.

 

 

ul 태그의 클래스 네임이 list이고,

ul 태그의 자식 태그인 li 태그는 왼쪽 사진처럼 열렬히 나열하여 기존에 작성해왔다.

 

그래서 최하단의 자식 태그에 스타일을 줄 때, 그 태그까지 도달하기 위한 과정을 모두 작성해줘야 한다는 불편함이 있었다.

 

작년에 내가 HTML, CSS로만 웹 퍼블리싱을 진행했던 포스팅을 살펴보면 쉽게 와닿을 것이다.

 

아래 링크를 참조하겠다.

 

 

https://sungjaecloud.tistory.com/219 

HTML, CSS로 만들어본 지하철 노선도 웹디자인

 

좌 : SCSS를 활용 / 우: SASS를 활용

자, 위 코드를 살펴보면 SCSS와 SASS는 어딘가 같은 것 같으면서도 다르다. 일단, SCSS와 SASS 모두 가장 크게 눈에 띄는 것은 우리가 작성한 HTML 코드처럼 CSS 코드를 마치 HTML 태그처럼 들여 써가며 작성할 수 있다는 것이다. 그래서 기존의 CSS처럼 코드를 작성할 필요가 없어졌고, 코드가 더 읽기 편해졌으며 간결해졌다. 

 

그리고 또 다른 눈에 띄는 점이 있다면, SCSS는 중괄호를 열고 닫는 구조로 이 스타일 속성이 어디서 어디까지 적용되는지 보다 직관적인 반면, SASS는 그렇지 않기 때문에 똑같은 코드여도 단순히 보기엔 깨끗해 보이나 코드를 읽는 게 다소 불편하고 어색하다.

 

🙌 그래서 SCSS와 SASS의 차이점이 뭔데?

SCSS는 Sassy CSS(오지고 지리게 멋진 CSS)의 줄임말이고, SASS는 Syntactically Awesome Style Sheets(문법적으로 지리는 스타일시트)의 줄인말이라고 한다. 둘 다 지리긴 하나보다 ㅋ.ㅋ

 

SASS 보다 SCSS가 뒤에 나왔고 여러가지 문법의 차이가 있지만, SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하길 더 권장한다고 한다.

 

🛵 작동원리

SCSS(SASS)를 CSS Pre-processor(CSS 전 처리기) 라고도 하는데 이는 SCSS(SASS) 자체로 브라우저에 작용할 수 없기 때문에 CSS를 확장해서 쉽고 빠르고 편리하게 사용하기 위해 쓰는 스크립팅 언어이므로 컴파일 작업이 필요하다. 그래서 아래 그림을 참고하면,

우리는 에디터에서 SCSS(SASS)로 작업을 하고 작성된 코드는 컴파일러를 통해 CSS로 자동으로 변경되어 웹에서 읽힌다.

 

참고 : https://velog.io/@jch9537/CSS-SCSS-SASS

CSS & SCSS & SASS