CSS 개발, Sass & SCSS 소개

CSS를 개발해? CSS가 개발까지 필요한거였어?

웹 기술을 이용한 프론트엔드 개발에 익숙하지 않은 개발자라면 유사한 의문을 품을 수 있을께다. 지금 이 글을 쓰고 있는 본인도 웹 개발에는 문외한이고, Awesome Patrick을 개설하면서 겨우 최근의 웹 기술을 조금 맛 본 실정이다.

JavaScript 등을 이용해 네이티브앱에 버금가면서도 개발 속도도 빠르고 멀티 플랫폼 지원도 쉽게 할 수 있는 여러 도구들이 등장했지만,

이름은 들어봤어. 네이티브 코딩으로 다 할 줄 알고 더 복잡한 고급 기능들도 쓸 수 있는데, 엑스칼리버 두고 뭐하러 커터칼을 써?

라며 공부를 게을리 했던 것이 사실이다.

그런데, 모든 앱을 개발하는데 엑스칼리버가 필요한 것은 아니며, 커터칼처럼 보였던 것이 실은 맥 형님이 들고 다니던 스위스 아미 나이프였더라. 늦었다 실망 말고 공부하자.

CSS라는 용어는 굳이 웹 개발자가 아니더라도 들어는 봤을 것이다. 간단히 얘기하면 대상 문서의 서식을 정의한 문서 정도 되겠다. 워드프로세서를 이용해 글을 쓸 때, 전체 문서의 글꼴은 맑은고딕, 본문의 글자 크기는 10포인트, 제목의 글자 크기는 12포인트에 굵게, 단락의 첫 글자는 한 칸 띄고 시작… 등을 정의하는 것처럼 CSS도 대상 문서—주로 HTML 문서—의 서식만을 따로 정의한 것이다.

그런데 이런 서식을 개발한다? 워드프로세서의 예로 돌아가 보자.

• 본문은 10포인트 검은색 글자
• 표의 캡션은 9포인트 회색 글자
• 표의 내용은 10포인트 회색 글자

문서의 서식이 위와 같다면, “검은색”, “회색”, “10포인트”, “9포인트"를 각각 변수에 담고 싶지 않은가? ‘표’라는 주제 아래에 ‘캡션’과 ‘내용’을 묶고 싶지 않은가? Sass를 사용하면 바로 이런 것이 가능하다. 정리하면,

결과로 CSS 파일을 얻을 수 있는, CSS에는 없는 편리한 기능들이 추가된 언어

이 바로 Sass이다. 공식 명칭이 첫 글자만 대문자인 Sass이다. 왜 나머지는 소문자로 쓰는거지?

공식 사이트에서는 다음과 같이 설명하고 있다.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

예상했겠지만 Sass 언어로 작성한 원본 문서를 CSS로 변환해 주는 도구가 필요하다.

이 과정이 마치 C 컴파일러가 소스 파일을 목적 파일로 컴파일하는 과정과 비슷해, compile이라 하는 사람도 있고—공식 사이트에서도 compile이라 표현하고 있다—, 좀 더 파고들어 원본과 결과가 모두 사람이 읽을 수 있는 형태이니 pre-processing이라 하는 사람도 있는 것 같다. 용어야 뭐가 중요한가.

공식 사이트에는 세 가지 변환 도구가 있는데, 각각 Dart로 구현된 Dart Sass, C/C++로 구현된 LibSass, Ruby로 구현된 Ruby Sass이다. 최초 구현은 Ruby Sass였는데, 현재는 Dart Sass가 primary 구현이 되며 Ruby Sass는 deprecate 단계에 있다. LibSass는 Sass를 여기저기서 다 사용할 수 있도록 Ruby Sass를 포팅한 것인데, 목적 그대로 wrapper를 통해 다양한 언어에서 사용되고 있고, 심지어 Ruby wrapper도 있다.

그럼 SCSS는 뭐냐?

결론부터 얘기하면 SCSS는 Sass의 또 다른 문법이다. 모든 언어에는 고유의 문법이 있듯이 Sass도 문법이 있는데, 협의에서 그 문법이 다시 Sass와 SCSS로 나뉜다. Sass 문법은 구형, SCSS 문법은 신형이라 생각하면 편하다.

우선 CSS가 생긴 것을 보면,

/* css */
.my-class {
    color: black;
    border-color: gray;
}

이렇게 중괄호({})와 세미콜론(;)을 사용한다. 그런데 Sass의 최초 문법은 indentation과 줄넘김을 사용했다.

/* sass */
.my-class
	color: black
	border-color: gray

이걸 CSS와 비슷하게 중괄호와 세미콜론을 사용하도록 다시 만든 것이 바로 SCSS이다.

/* scss */
.my-class {
	color: black;
    border-color: gray;
}

위 예에서 보는 것처럼 Sass, SCSS에서만 제공하는 기능을 사용하지 않았을 경우 SCSS는 CSS와 100% 동일한 형태가 되지만, Sass와 CSS는 서로 다른 모양이다. 그래서 CSS는 그 자체로 완벽한 SCSS 원본 파일이 된다.

문법을 학습하려면 여기로…