[TIL] CSS 전처리기를 사용하는 이유

프로젝트를 하면서 SASS를 처음 사용하게되었다. 아직까지 굳이 CSS가 아닌 SASS를 사용해야하는 필요성을 느끼지 못했다. 이번 기회에 SASS를 공부하고 익숙해지면서 SASS의 장점을 파악할 수 있는 좋은 기회라고 생각한다. 이를 위해 먼저, CSS 전처리기의 개념과 사람들이 많이 사용하는 이유를 알아보았다.

---

CSS 전처리가 무엇일까?

MDN에서는 자신만의 특별한 syntax를 통해 CSS를 생성하는 프로그램이라고 한다. 이를 위해 믹스인, 중첩 셀렉터, 상속 셀렉터 등을 사용할 수 있다고한다. CSS 전처리기는 CSS를 사용하면서 불편한점을 해결하기위해 탄생하였고 CSS를 쉽게 작성하고 다른 사람들이 쉽게 이해할 수 있도록하기 적합하다.

 

CSS의 불편한 점은?

구조가 복잡하고 큰 서비스를 개발할 때 CSS는 1000줄이 쉽게 넘어갈 수 있을 것이다. 이는 수정하기 어렵게하고 주석을 포함시키더라도 구조를 파악하기 어려워진다. 이를 위해 한 줄에 모두 적을 수 있겠지만 근본적인 해결방법은 아니라고 생각한다.

이를 위해서 CSS 파일을 모듈화 <link>를 통해 여러 개의 CSS 파일을 불러올 수 있을 것이다. 하지만 이를 위해서 HTTP 요청을 해야하고 규모가 큰 프로젝트일수록 부담이 될 수 있을 것이다.

이외에도 비슷하게 선언한 선택자들도 중복해서 사용하게되는 불편함이 있다. 구조가 복잡한 HTML에서 요소를 선택하기할 때 끝 부분만 다를 수도있는데 이를 위해 앞 부분의 내용을 복사 붙여넣거나 다시 써야하는 불편함이 존재한다.

 

SASS를 통해 위의 불편함을 해결할 수 있을까?

어떠한 기술의 발전을 보면 이전 기술들의 불편함에서 시작하여 구조를 단순화하거나 실행을 쉽게 발전되어왔다. CSS 전처리기도 CSS의 위와같은 불편함을 해결하기위해 탄생되었다고 생각한다. 그렇다면 지금까지 겪은 CSS의 불편함을 어떻게 해결할 수 있는지 알아보자.

 

편리함

CSS에서 색상 값, 폰트 크기 등을 반복해서 사용하게된다. 이를 피하기위해 SASS에서 색상 값, 폰트 크기 등을 변수화하여 사용할 수 있다. 아래와 같이 $를 통해 변수를 생성하고 이를 특정한 값대신 사용할 수 있다. 색상 값같이 기억하기 어려운 값들을 변수화해서 사용하면 확인할 필요없이 바로 사용할 수 있을 것이다.

$main-color: #ff9933;
h2 {
	color: $main-color;
}

 

반복 줄이기

HTML 요소를 선택하기위해 반복해서 선택자를 사용하였는데 SASS는 선택자들을 묶어서 사용할 수 있다. 아래와같이 선택자를 중첩으로 사용하여 불필요하게 선택자를 반복해서 사용할 일을 줄일 수 있다.

div {
	color: orange;
    h2 {
    	font-size: 24px;
    }
}

---

이외에도 CSS 전처리기를 사용하는데 장점들이 존재할 것이다. 앞으로 프로젝트를 하면서 느낀 것들을 추후에 다시 정리해보도록 한다.