[Sass/SCSS] CSS중노동 탈출하기 - 02. 컴파일 / 옵션 / 소스맵

[Sass/SCSS] CSS중노동 탈출하기 - 01. Sass(SCSS)를 시작하자!

[Sass/SCSS] CSS중노동 탈출하기 - 01. Sass(SCSS)를 시작하자!

지난번 글에서는 Sass를 쓰는 이유와 설치방법을 알아보고 컴파일 까지 해보았습니다.
오늘은 Sass(SCSS)를 컴파일 하기 위한 명령어와 소스맵, 그리고 몇몇 주요한 컴파일 옵션들을 알아보겠습니다!

명령어로 컴파일하기

# 하나의 파일
$ sass input.scss output.css

# 여러개 파일
$ sass inputA.scss:outputA.css inputB.scss:outputB.css

위의 명령어를 이용해 .scss입력파일을 .css출력파일로 컴파일 할 수 있습니다. 컴파일할 파일이 여러개일 경우에는 입력파일과 출력파일 사이에 :(콜론)을 넣어 한쌍으로 묶어줍니다.

디렉토리 전체를 컴파일 할 수도 있습니다.

$ sass input:output

# 계층으로 입력할 수도 있다.
$ sass input/scss:output/css

위와같이 명령어에 디렉토리명을 입력하면 input디렉토리의 모든 scss파일이 output디렉토리에 같은 파일명으로 컴파일됩니다.

컴파일 옵션

--watch 감시 옵션

파일을 변경할때마다 매번 명령어를 넣어 컴파일 해야 한다면 엄청 번거롭겠죠?
--watch를 사용하면 sass가 파일을 감시하고 있다가 scss입력파일이 수정되면 자동으로 css로 컴파일해줍니다.
다음과 같이 사용합니다.

$ sass --watch input:output

--style 스타일 옵션

--style을 사용하여 취향과 필요에 따라 컴파일되는 css파일의 작성 스타일을 설정할 수 있습니다.
dart sass의 경우 두가지의 스타일중 하나를 선택할 수 있습니다.

📍expanded(기본)

$ sass --style expanded input:output

body {
  font: 100% Helvetica, sans-serif;
  color: #ff3300;
}
body h1 {
  font-weight: bold;
}

기본적인 스타일로, 선택자와 선언을 각 한줄씩 작성하는 스타일입니다.

📍compressed

$ sass --style compressed input:output

body{font:100% Helvetica,sans-serif;color:#f30}body h1{font-weight:bold}

compressed는 모든 공백을 제거하고 한줄로 작성된 방식입니다.

소스맵

이전 컴파일한 파일을 살펴보니 style.css.map이라는 낯선 확장명의 파일이 눈에 띄네요.
이 ~.map파일은 소스맵이라고 하며 말 그대로 원본 소스를 찾게 해주는 지도라고 할 수 있습니다.

지난 글에서 브라우저는 scss를 읽지 못하므로 브라우저가 읽을 수 있는 css로 컴파일 과정을 거쳐야 한다고 말씀드렸는데요,
브라우저는 css를 읽고 있지만 우리는 여전히 원본 scss파일을 편집해야 하므로 브라우저에서 디버깅하기가 어려워집니다.
이 때 소스맵을 이용하면 브라우저가 원본소스와 컴파일된 css 사이의 정보를 알수 있게 됩니다.
따라서 브라우저 개발자도구에서 scss 소스를 보며 간편하게 디버깅을 할 수 있게 되는 것입니다.

👉 소스맵은 개발자가 작업할 때 필요한 파일이며 배포시에는 지워주는것이 좋습니다.

소스맵은 생성되는것이 기본값이고 소스맵을 처음부터 생기지 않게 설정할 수도 있습니다.
명령어에 --no-source-map을 추가하면 소스맵이 생성되지 않습니다.

---

이번 글에서는 Sass(SCSS)의 기본적인 컴파일 방법과 옵션, 소스맵에 대해 알아보았습니다.
다음부터는 본격적으로 scss의 사용방법을 알아보게 될텐데요!  
빠른 시일 내에 돌아오도록 하겠습니다.
읽어주셔서 감사합니다!😎