Sass 출력 스타일

출력 스타일 4가지

중첩 :nested

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

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

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

확장 :expanded

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

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

축약 :compact

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

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

압축 :compressed

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

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

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

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

출력 스타일 설정

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

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

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

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