다른 웹 퍼블리셔의 포트폴리오를 찾아 보다 보면 능력(어빌리티) 항목에 HTML, CSS, JS, jQuery와 함께 쓰여있는 Sass, Less, Stylus를 보신 적이 있나요? 우리는 잘 알지 못했지만, 실제로 실무에서도 많이 사용하고 있는 CSS 전처리기(Pre-Processor) 입니다. 그렇다면 전처리기는 무엇이고, 왜 사람들이 많이 사용할까요?
우리가 익혀 왔듯 CSS는 웹 언어 중에서 쉽고 간결한 편에 속합니다. 하지만 우리가 프로젝트(대표적으로 각자가 만들고 있는 개인 포트폴리오가 있겠죠)를 진행하면 할 수록, 작업량이 많아지면 많아질 수록, 그리고 작업이 고도화 될 수록 불편함 역시 같이 커지게 됩니다. 페이지의 컨텐츠와 요소의 양에 따라 선택자는 기하급수적으로 늘어나고, 코드가 쉽게 지저분해지면서 불편한 부분들이 발생할 수 밖에 없습니다. 색상코드를 일일이 기억해야 한다던지, 상속 문제로 인해 특정 class의 이름이 겹쳐서 겹치거나 깨지는 등의 문제가 발생하기도 하고 이는 결국 유지보수도 어려워 진다는 단점이 있습니다. 결국 단순해서 익히기 쉬웠던 CSS가 같은 이유로 우리의 발목을 잡는 경우가 발생합니다.
"아, 주조색 맨날 똑같은거 쓰는데 변수같은걸로 선언해두고 꺼내쓰는 방법 없나?" 혹시 생각 해본 적 없으세요? 우리만 이런 생각을 한게 아닙니다. 필요성을 느낀 사람들이 스크립트를 이용해 만든 것이 바로 CSS 전처리기입니다. CSS를 HTML처럼 중첩화 하여 구조적으로 보기 쉽게 정리도 가능하고, 변수 사용은 물론 연산, 조건문(if)과 반복문(for), 함수와 매개변수 까지도 사용 가능합니다.
하지만 단점도 분명 존재하죠. 우리가 일반적으로 사용하는 웹브라우저에서는 이 전처리기로 작성된 파일을 CSS로 인식하지 못합니다. 그래서 꼭 거쳐야 하는 것이 바로 컴파일(트랜스파일링)인데요.
컴파일러를 통해 CSS 파일로 변환이 필요합니다
쉽게 설명하자면 컴파일은 번역이고, 컴파일러는 구글 번역기입니다. Sass나 Less로 작성한 파일을 컴파일러에 넣게 되면, CSS로 번역을 해주는 거죠. 컴파일을 해서 나온 CSS 파일을 웹으로 연결시켜주면 짜잔! 하고 우리가 원하는 결과물을 얻게 되는 것입니다. 오늘은 여러 전처리기 중 Sass를 기반으로 소개해드릴까 합니다.
SCSS로 작성된 예제(왼쪽)를 컴파일하면 CSS(오른쪽)로 변환됩니다
시작부터 극찬을 하는게 아니라, 얘 이름의 뜻이 원래 그러합니다. Syntactically Awesome Style Sheets의 줄임말이거든요. (ㅋㅋ;) CSS 전처리기 중에서는 가장 먼저 등장했고, Bootstrap에 쓰여서 많은 사용자를 보유한 Less와 함께 대표적인 전처리기입니다. 프로젝트마다 Less나 Sass를 다르게 쓰는 경우도 있다고는 하는데, 쓰는 방법이 조금 다를 뿐 기능적인 부분에서 큰 차이는 없다고 합니다.
Sass는 .scss 문법이 표준입니다. CSS와 크게 다른 점은 없고, 단순히 기능이 추가 된 수준의 문법이라 아마 처음 접한 여러분들도 손쉽게 따라할 수 있을겁니다.
Visual Studio Code를 이용해 Sass를 처음 만나봅시다.
VSCode에서 확장 프로그램을 설치합니다.
설정창 오픈(Ctrl+,) 후 최상단 검색창에 Live Sass Compile Map 을 입력합니다. 그 다음 "settings.json에서 편집" 을 클릭하세요.
settings.json 파일에서 "liveSassCompile~"로 시작하는 설정값에 false 가 들어가 있는지 확인 후 저장합니다.
index.html 파일을 만들고, css 폴더를 만들고, css 폴더 안에 style.scss 파일을 생성한 후 index.html에 link 태그를 이용하여 style.css를 연결해둡시다. style.css를 만들 필요는 없습니다. 확장프로그램이 알아서 생성해주니까요.
