Sass 출력 스타일 — 4가지 CSS 양식 중 마음에 드는 것을 선택하세요

Sass의 기본 CSS 출력 스타일인 중첩 스타일은 문서의 구조를 잘 반영한 매우 뛰어난 양식이지만, 사용자의 취향과 필요에 맞춰 Sass는 다양한 출력 스타일을 지원합니다.¹

출력 스타일 4가지

중첩 `:nested`

중첩 스타일은 Sass의 기본 출력 스타일로, CSS 스타일과 HTML 문서의 구조를 잘 보여줍니다. 각 속성은 한 줄에 작성하고, 각 규칙은 중첩 정도에 따라 들여쓰기합니다.

중첩 스타일로 출력한 CSS

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }

들여쓰기 덕분에 훑어만 봐도 스타일 구조를 쉽게 알 수 있으므로 큰 CSS 파일을 살펴볼 때 더욱 유용합니다.

확장 `:expanded`

확장 스타일은 사람이 작성한 CSS 스타일과 거의 같다고 할 수 있습니다. 속성은 규칙 안에서 들여쓰기하여 각 한 줄에 작성하고, 규칙은 들여쓰기하지 않습니다.

확장 스타일로 출력한 CSS

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

축약 `:compact`

축약 스타일은 중첩 스타일이나 확장 스타일보다 공간을 덜 차지합니다. 각 CSS 규칙을 단 한 줄에 표시하며 속한 모든 속성도 같은 줄에 작성합니다.² 줄마다 선택자가 앞에 있어서 속성보다 선택자에 더욱 집중하게 합니다.

축약 스타일로 출력한 CSS

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

압축 `:compressed`

압축 스타일은 최소한의 공간을 차지하도록 압축한 형태로, 사람이 읽는 상황을 고려하지 않습니다. 선택자를 구분하는 공백처럼 꼭 필요한 공백이나, 파일 끝에 하나의 새 줄 밖의 공백은 모두 삭제합니다.³ 또 다른 소소한 압축도 실행하는데, 색상 값을 최소 표현으로 변경합니다.

압축 스타일로 출력한 CSS

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

출력 스타일에 따른 주석 출력 여부

	nested	expanded	compact	compressed
인라인 주석 `//`	X	X	X	X
블록 주석 `/* */`	O	O	O 한 줄로 출력	△ `!`로 시작할 경우에만 출력

주석에 관련한 자세한 내용은 한 줄 주석 // 여러 줄 주석 /* */에서 확인할 수 있습니다.

어떻게 설정하나요

4가지 출력 스타일 중 하나를 선택해서 :style 옵션⁴ 값으로 설정하거나, 커맨드라인에서 --style 플래그와 함께 값을 입력합니다.

루비 온 레일즈 설정 예시

Sass::Plugin.options[:style] = :compressed

커맨드라인 설정 예시

sass --watch style.scss:style.css --style compressed

이외에도 개발 환경에 따라 각기 다른 방법으로 출력 스타일 옵션을 지정할 수 있습니다.

원문(새창) ↩
여러 줄로 작성한 주석도 모두 한 줄로 표시합니다. ↩
여러 줄 주석도 모두 삭제합니다. 하지만 주석의 첫 글자로 느낌표 !를 써넣으면 삭제하지 않고 출력물에 그대로 표시합니다. ↩
루비 온 레일즈 Ruby on Rails 나 랙 Rack등 루비 기반 환경설정 파일에서 옵션(새창)을 설정할 수 있습니다. ↩

출력 스타일 4가지

중첩 :nested

확장 :expanded

축약 :compact

압축 :compressed