sass

css는 기본적으로 쉽고 간단하지만 웹페이지가 커질수록 복잡해지고 관리가 어렵습니다. 이러한 css의 한계를 극복하기 위해 css preprocessor가 등장하였는데 대표적으로 Sass, less가 있습니다.
이러한 css preprocessor는 변수, 함수, 상속등을 지원하여 css를 좀더 논리적인 파일단위로 나누고 구조적으로 작성할 수 있도록 도와줍니다.

Sass의 문제점은?

sass는 그 자체로 바로 사용하지 못하고 css파일로 변환 후 사용해야 합니다. 이러한 방식은 디버깅을 할 때 원본 파일을 찾기 어렵게 하고 많은 시간을 소요하게 합니다. 브라우져에서 개발자 도구를 켜고 요소검사를 통해 css를 검사하면 컴파일된 css파일이 나오기 때문에 style 요소를 바로 수정할 수 없고 해당 요소를 다시 sass파일에서 찾아야 하는 불편함이 있습니다.

css inspector

source map을 이용한 sass 디버깅

이러한 불편함을 개선하기 위해 나타난 방식이 source map 입니다. source map은 최초에는 압축된(minified) javascript파일의 디버깅을 쉽게 하기 위해 등장하였으나 현재 버전3에 이르러서는 다양한 파일형식을 지원하고 있습니다.

css파일의 1번째 줄의 5번째 열은 특정 scss파일의 10번째 줄의 5번째 열과 맵핑한다.

이러한 원리를 가지고 map 파일을 생성하게 되는데 형식은 다음과 같습니다.

{
  "version": 3,
  "mappings": ";AAiIA,qDAAsD;EACpD,OAAO,EAAE,GAAG"
  "sources": ["base.scss", "util.scss", "index.scss"],
  "names": [],
  "file": "index.css"
}

최신버전의 sass compiler와 javascript minifier등은 map파일을 만들 수 있는 옵션을 제공하고 있고 컴파일시 옵션을 켜서 map 파일을 만들면 됩니다. 이렇게 map 파일이 있으면 요소검사시 원본 파일을 가리킵니다.

맵핑

최신 브라우져(safari/chrome/firefox/IE11)등에서 지원하고 혹시 chrome에서 정상작동하지 않는 다면 옵션을 확인합니다.

chrome option

chrome option

workspace

source map의 마법을 통해 요소 검사시 실제 파일을 가리킬 수 있습니다. 하지만 아직까지 브라우져에서 확인하고 에디터에서 수정하고 다시 브라우져를 확인하는 조금은 귀찮은 작업이 남아있습니다. chrome 브라우져는 이러한 불편함을 알고 workspace라는 개념을 통해 서버에서 제공하는 소스파일을 로컬 디렉토리의 파일과 연결하는 방법을 제공합니다.

개발자도구 옵션을 통해 workspace에 폴더를 추가합니다.

workspace 선택

Add folder를 선택합니다.

Add folder

로컬 디렉토리의 scss파일이 위치한 디렉토리를 선택합니다.

select folder

경로가 추가되었습니다.

add folder

기본적인 설정을 완료했으면 마지막으로 서버의 파일을 로컬 파일과 연결해줍니다!

source tab

소스탭에서 scss파일을 선택하고 map to file system...을 선택합니다.

map to file system

같은 파일명을 선택합니다.

select file

chrome 브라우져를 재시작하겠다는 메시지가 나오면 재시작합니다.

restart option

마침내 모든 셋팅이 마무리 되면 개발자 도구에서 파일을 바로 선택해서 에디터가 아닌 브라우져에서 소스를 수정할 수 있게 됩니다.

chrome browser source editor

브라우져에서 소스를 수정하고 저장을 누르면 실제 로컬 디렉토리의 파일이 저장되고 자동으로 컴파일 하는 옵션을 켜 놓았다면 수정된 scss파일이 css파일로 컴파일 되고 브라우져에서 바로 확인 할 수 있습니다.

결론

sass + source map + chrome = awesome!!!

현재 source map은 다양한 파일 형식을 지원합니다. css preprocessor인 sass/less뿐 아니라 minified된 javascript는 물론 coffee script나 type script, es6등도 지원합니다.

디버깅을 피할 수 없다면 source map과 chrome 브라우져를 이용해서 한결 쉽고 빠르게 디버깅할 수 있습니다. 적극적으로 이용해 봅시다!



이 글이 도움이 되셨나요?

Feedly에서 Remotty 블로그 구독하기
페이스북에서 Remotty 구독하기